關(guān)于viemport的使用
方法
手機(jī)有不同的分辨率，不同的屏幕大小。
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
- width=device-width 設(shè)置寬度為屏幕寬度
- maximum-scale=1.0 設(shè)置最大縮放比例
- minimum-scale=1.0 設(shè)置最小的縮放比例。0.25-1.0
- user-scalable=no 禁止用戶捏合
- inital-scale = 1.0 設(shè)置初始化的縮放比例
- 在Android中還支持 target-densitydpi
- 像素密度
- 定義為每英寸點(diǎn)得數(shù)量
- 值
- device-dpi 使用設(shè)備原本的dpi作為目標(biāo)dpi，不會(huì)發(fā)生默認(rèn)縮放
- high-dpi 使用high-dpi作為dpi。中等像素密度和低像素密度設(shè)備相應(yīng)縮小
- medium-dpi 使用medium-dpi作為dpi。高像素密度設(shè)備相應(yīng)放大，像素
密度設(shè)備相應(yīng)縮小，這是默認(rèn)的target-api - low-dpi 使用mdpi作為目標(biāo)dpi。中等像素密度和高像素密度設(shè)備相應(yīng)放大
- value 指定一個(gè)具體的dpi值作為target-dpi，這個(gè)值范圍需要在70-400之間
- 特別說(shuō)明就是這個(gè)屬性只有Android支持，并且Android已經(jīng)決定廢棄。所以盡量不要用
布局種類
聲明：自適應(yīng)和響應(yīng)式布局原理都是檢測(cè)設(shè)備，根據(jù)不同的設(shè)備采用不同的css代碼。并且css都是采用百分比，而不是固定寬高。
靜態(tài)布局（static layout)
固定死的寬和高自適應(yīng)（adaptive layout)
為不同屏幕定制不同布局
在每個(gè)布局中，頁(yè)面元素不隨窗口大小而改變流失布局（liquid layout）
只有一套布局
頁(yè)面元素隨著窗口大小而改變響應(yīng)式（responsive layout)
為不同屏幕定義分辨率定義不同的布局
同時(shí)在么個(gè)布局中，應(yīng)用流式布局，即頁(yè)面元素寬度隨著屏幕調(diào)整而自動(dòng)適配
流式布局
- 定義
- 只有一套布局
- 頁(yè)面元素隨著窗口大小而改變（百分比布局）
- 有em/rem替換px
- 百分比的使用
- 尺寸百分比 width：20%
- 位置百分比 top：50%
- 保留小數(shù)點(diǎn)后5位 3.12343%
- 單位
- em 全拼 element ，值會(huì)繼承腹肌元素的字體大小而改變
- rem 相對(duì)于html根標(biāo)簽的單位
- 兼容性 在ie6~8上不能使用
響應(yīng)式布局
-
定義
- 為不同屏幕定義分辨率定義不同的布局
- 同時(shí)，在每個(gè)布局中，應(yīng)用流式布局，頁(yè)面元素寬度隨著屏幕調(diào)整而自動(dòng)適配
- 使一個(gè)網(wǎng)站能夠兼容多個(gè)終端而不是每個(gè)終端做一個(gè)特定的版本
-
好處
- 響應(yīng)式可以為不同的終端用戶提供更加舒適的頁(yè)面和更好的用戶體驗(yàn)
- 隨著目前大屏幕移動(dòng)設(shè)備的普及，可以用”大勢(shì)所趨“來(lái)形容
-
實(shí)現(xiàn)方法
- 通過(guò)不同屏幕大小定義不同的樣式
- 媒體查詢讓css可以更精確作用于不同的設(shè)備類型和統(tǒng)一設(shè)備的不同條件
- 媒體查詢的大部分媒介特性都接受min和max用于表達(dá)：大于或等于或小于或等于
- 在link中使用或者嵌套@media查詢?cè)O(shè)備 同時(shí)media可以查詢用戶設(shè)備
<link rel="stylesheel" type="text/css" media="only screen and (max-width:480px )" href = "link_css@media screen (max-width:700px) and (min-width:500px) {}
