移動端佈局

丹丹趙發表於2019-02-16

viewport

瀏覽器上 用來顯示網頁的那部分割槽域了
1、設定
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
view 有
init-scale 頁面的初始縮放值 為數字
width viewport的寬度
height viewport的高度
mininum-scale 允許使用者縮放最小值
maxinum-scale 允許使用者縮放最大值
user-scalable 是否允許使用者進行縮放

REM佈局

使用rem方案可以做到適配不同螢幕解析度的原理：

設計稿的畫素/html(font-size)=css中的代替px 由於html(font-size)這一部分是根據螢幕的寬度（媒體查詢可以得到螢幕的寬度）在css內容來動態改變的。

媒體查詢

使用css 能在不同的條件下使用不同的樣式，是頁面最終在不同的終端裝置達到不同的渲染效果
@media 媒體型別 and (媒體特性) {你的樣式}
使用的例子：

@media screen and(max-width: 480px) {
    html{
        font-size:200px;
    }
}

同時注意的是 IE8 既不支援html5也不支援 媒體查詢
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

“></script>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js

“></script>
<![endif]–>

相關文章