移動web rem適配布局

目標：

之前我們使用flex布局實現移動web開發時，頁面基本上是固定的，而且無論是流式布局還是flex布局主要都是針對寬度進行的布局；如果想對高度，如布局可以隨著螢幕變化，寬、高同時進行等比例縮放，就要用到rem適配布局；

rem單位：

rem(root em)是乙個相對單位，類似於em，em是父元素字型大小；

不同的是rem的基準是相對html元素的字型大小；

比如，根元素(html)設定font-size:12px;非根元素設定width:2rem;換算成px就是24px；

html divp

所有的基於同一的根元素的font-size設定的rem單位的元素：

最終就可以通過修改html裡邊的文字大小，來改變頁面中所有元素的大小，進行整體控制；

html中設定的font-size如何動態變化；這就要用到**查詢；

**查詢（media query）是css3新語法：

語法規範

@media mediatype and|not|only (media feature)

關鍵字

not ：排出某個**型別

only：指定某個特定的**型別

media feature **特性，必須使用小括號包含；

示例：

/* 小於等於800px的螢幕 背景色設定為粉色 */
@media screen and (
max-width
:800px)
}/* 小於等於500px的螢幕 背景色設定為紅色 */
@media screen and (
max-width
:500px)
}

使用：

乙個完整示例：

@media screen and (
max-width
:539px)
}/* @media screen and (min-width:539px) and (max-width:969px)
}@media screen and (
min-width
:970px)
}

可以實現不同螢幕尺寸元素大小的動態變化；

*
@media screen and (
min-width
:320px)
}@media screen and (
min-width
:640px)
}.header

引入資源

可以針對不同的**使用不同的樣式表；直接在link中判斷螢幕的尺寸，然後引入不同的css；


ref=
"stylesheet"
media
="meidatype and|not|only (media feature)"
href
="mystyle.css"
>

使用less 著重要使用less提供的計算能力：

比如，乙個ui設計的高80px，html的font-size設定為50px，那麼該高就可以設定為80 / 50rem；

less編譯：

vscode的easy less外掛程式，可以完成less檔案自動編譯css檔案的過程；使用時直接使用同名的css檔案即可；

目標：

方案：

原理：

實現：

技術方案1：less + **查詢 + rem

目前一般依據6s螢幕寬750px 為準，出一套基準設計圖；具體的方案如下：

@media screen and (
min-width
:320px)
}@media screen and (
min-width
:750px)
}

div

common.less：主要螢幕尺寸的**查詢根元素字型大小設定

// 寫在最上邊
html
// 15份
@num:15;
// 從 小 到 大
@media screen and (min-width:320px)
}@media screen and (min-width:360px)
}@media screen and (min-width:375px)
}@media screen and (min-width:384px)
}@media screen and (min-width:400px)
}@media screen and (min-width:414px)
}@media screen and (min-width:424px)
}@media screen and (min-width:480px)
}@media screen and (min-width:540px)
}@media screen and (min-width:720px)
}@media screen and (min-width:750px)
}

然後在主介面的less中引入common.less：

// 在乙個less樣式檔案中，匯入另乙個less樣式檔案
@import "common";
...

主介面less body修改：

@import "common";
body
// 頂部固定搜尋框
@basefont:50;
.search-content

rem轉換：設定乙個margin:10px 11px 12px 13px;轉換成rem單位

margin:10rem / @basefont 11rem / @basefont 12rem / @basefont 13rem / @basefont ;

p20

技術方案2：flexible.js(**的庫) + rem

剩餘的flexible.js會處理；

設定好視口->引入公共css之後->還要引入flexible.js->現在對比第一種方案，只需要在less檔案中直接寫body樣式即可：

// 主介面less body修改 body /* 由於flexible預設是依照螢幕寬進行的10等分劃分，那麼最好設定乙個上限：如果螢幕超過750px，就按照750px來顯示 */ @media screen and (min-width:750px) }// 頂部固定搜尋框 @basefont:75;

.search-content

vscode px轉rem外掛程式 cssrem：可以自動完成px到rem單位的轉換；

實際頁面的各個元素的所有單位全部轉換為rem單位，最終實現適應移動web開發的rem適配布局；

移動web rem適配布局

rem適配布局

rem適配布局

rem適配布局

相關推薦