移動端開發基礎

1. viewport

屬性	說明
width	使用與設備無關的像素表示所需的視區寬度。 它能夠是明確的數字（如 240）或最好是相對值，如 device-width。
height	使用與設備無關的像素表示所需的視區高度。 它能夠是明確的數字（如 320）或最好是相對值，如 device-height。
initial-scale	表示首次加載頁面時所需的縮放級別。 值 1 表示應使用天然大小呈現頁面，根本不進行縮放。值 2 將頁面大小加倍， 依此類推。 您也能夠使用十進制值，例如「1.0」。
minimum-scale	表示頁面容許的最低縮放級別。 值 1 表示用戶不能將頁面縮小到低於天然大小。
maximum-scale	表示頁面容許的最大縮放級別。 最大值爲 10.0。
user-scalable	yes/no 屬性，用於表示是否容許用戶縮放頁面。

常見用法：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

 2. 媒體類型（media type）

常見用法：

<!--方法一 -->
<link href="style.css" media="screen">

<!--方法二 -->
@media screen{
    selector{rules}
}

另外，媒體類型支持not、only關鍵詞

@media only screen{
      selector{rules}  
}

3. 媒體查詢（media query）

語法結構：

1. @media 媒體類型 and (css屬性:值)

@media screen and (max-width:240px){
    body{font-size:medium;}
}

2. @media 媒體類型 and (css屬性:值), 媒體類型 and (css屬性:值)

@media handheld and (min-width:360px),screen and (min-width:480px){
    body{font-size:large;}
}

 4. 橫豎屏(landscape/portrait)

/*豎屏*/
@media screen and (orientation:portrait) {
    selector{rules}
}

/*橫屏*/
@media screen and (orientation:landscape) {
    selector{rules}
}