移動端開發基礎

標籤：style   blog   io   ar   color   使用   sp   strong   on   

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}}

 

移動端開發基礎