移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移動(dòng)web開發(fā)之rem布局
一、rem基礎(chǔ)
rem單位
rem (root em)是一個(gè)相對(duì)單位，類似于em，em是父元素字體大小。
不同的是rem的基準(zhǔn)是相對(duì)于html元素的字體大小。
比如，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px。
/* 根html 為 12px */ html {font-size: 12px; } /* 此時(shí) div 的字體大小就是 24px */ div {font-size: 2rem; }rem的優(yōu)勢(shì)：父元素文字大小可能不一致， 但是整個(gè)頁(yè)面只有一個(gè)html，可以很好來(lái)控制整個(gè)頁(yè)面的元素大小。
二、 媒體查詢
2.1 什么是媒體查詢
媒體查詢（Media Query）是CSS3新語(yǔ)法。
- 使用 @media查詢，可以針對(duì)不同的媒體類型定義不同的樣式
- @media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面
- 目前針對(duì)很多蘋果手機(jī)、Android手機(jī)，平板等設(shè)備都用得到多媒體查詢
2.2 媒體查詢語(yǔ)法規(guī)范
- 用 @media開頭 注意@符號(hào)
- mediatype 媒體類型
- 關(guān)鍵字 and not only
- media feature 媒體特性必須有小括號(hào)包含
1. mediatype 查詢類型
? 將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型
2. 關(guān)鍵字
? 關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件。
- and：可以將多個(gè)媒體特性連接到一起，相當(dāng)于“且”的意思。
- not：排除某個(gè)媒體類型，相當(dāng)于“非”的意思，可以省略。
- only：指定某個(gè)特定的媒體類型，可以省略。
3. 媒體特性
每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。我們暫且了解三個(gè)。
注意他們要加小括號(hào)包含
案例：根據(jù)頁(yè)面寬度改變背景變色
實(shí)現(xiàn)思路：
① 按照從大到小的或者從小到大的思路
② 注意我們有最大值 max-width 和最小值 min-width都是包含等于的
③ 當(dāng)屏幕小于540像素， 背景顏色變?yōu)樗{(lán)色 （x <= 539）
④ 當(dāng)屏幕大于等于540像素 并且小于等于 969像素的時(shí)候 背景顏色為 綠色 ( 540=<x <= 969）
⑤ 當(dāng)屏幕大于等于 970像素的時(shí)候，背景顏色為紅色 （ x >= 970）
?
4. 媒體查詢書寫規(guī)則
screen還有and必須帶上不能省略的
我們的數(shù)字后面必須跟單位970px,這個(gè)px不能省略的
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來(lái)寫,但是我們最喜歡的還是從小到大來(lái)寫，這樣代碼更簡(jiǎn)潔。
媒體查詢從小到大優(yōu)勢(shì)代碼分析:
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title></title><style type="text/css">/* 這句話的意思就是:在我們屏幕上并且最大寬度是 800px,設(shè)置我們想要的樣式max-width 最大寬度為800px,小于等于800px *//* 媒體查詢可以根據(jù)不同的屏幕尺寸來(lái)設(shè)置不同的樣式 *//* 寬度小于等于800px時(shí),背景顏色變?yōu)榉凵?*/@media screen and (max-width: 800px){body {background-color: pink;}}/* 寬度小于等于500px時(shí),背景顏色變?yōu)樽仙?*/@media screen and (max-width: 500px){body {background-color: purple;}}</style></head><body></body> </html>
2.3 媒體查詢+rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化
rem單位是跟著html來(lái)走的，有了rem頁(yè)面元素可以設(shè)置不同大小尺寸
媒體查詢可以根據(jù)不同設(shè)備寬度來(lái)修改樣式
媒體查詢+rem 就可以實(shí)現(xiàn)不同設(shè)備寬度，實(shí)現(xiàn)頁(yè)面元素大小的動(dòng)態(tài)變化
案例：媒體查詢+rem實(shí)現(xiàn)元素變化:
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">/* html {font-size: 100px;} */* {margin: 0;padding: 0;}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem; /* 行高等于高度即可實(shí)現(xiàn)文字垂直居中的效果 */}/* 從小到大的順序 */@media screen and (min-width:320px) {html {font-size: 50px;} }@media screen and (min-width:640px) {html {font-size: 100px;} }</style></head><body><div class="top">購(gòu)物車</div></body> </html>2.4 引入資源（理解）
當(dāng)樣式比較繁多的時(shí)候，我們可以針對(duì)不同的媒體使用不同 stylesheets（樣式表）。
原理，就是直接在link中判斷設(shè)備的尺寸，然后引用不同的css文件。
style640.css文件：
div {float: left;width: 50%;height: 100px; }div:nth-child(1) {background-color: pink; }div:nth-child(2) {background-color: purple; }style320.css文件：
div {width: 100%;height: 100px; }div:nth-child(1) {background-color: pink; }div:nth-child(2) {background-color: purple; } <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">/* 當(dāng)屏幕大于等于640ox以上時(shí),讓div一行顯示2個(gè) *//* 當(dāng)屏幕小于640px時(shí),讓div一行顯示1個(gè) *//* 一個(gè)建議:媒體查詢最好的代碼書寫方法是"從小到大” *//* 引入資源就是 針對(duì)不同的屏幕尺寸 調(diào)用不同的css文件 */</style><link rel="stylesheet" type="text/css" href="./css/style320.css" media="screen and (min-width:320px)"/><link rel="stylesheet" type="text/css" href="./css/style640.css" media="screen and (min-width:640px)"/></head><body><div>1</div><div>2</div></body> </html>三、less 基礎(chǔ)
3.1 維護(hù)css弊端
CSS 是一門非程序式語(yǔ)言，沒有變量、函數(shù)、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
- 不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
- CSS 沒有很好的計(jì)算能力
- 非前端開發(fā)工程師來(lái)講，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼項(xiàng)目。
3.2 Less 介紹
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴(kuò)展語(yǔ)言，也成為CSS預(yù)處理器。
做為 CSS的一種形式的擴(kuò)展，它并沒有減少CSS的功能，而是在現(xiàn)有的CSS語(yǔ)法上，為CSS加入程序式語(yǔ)言的特性。
它在CSS 的語(yǔ)法基礎(chǔ)之上，引入了變量，Mixin（混入），運(yùn)算以及函數(shù)等功能，大大簡(jiǎn)化了 CSS 的編寫，并且降低了 CSS的維護(hù)成本，就像它的名稱所說(shuō)的那樣，Less可以讓我們用更少的代碼做更多的事情。
Less中文網(wǎng)址：http://lesscss.cn/
常見的CSS預(yù)處理器：Sass、Less、Stylus
一句話：Less是一門 CSS 預(yù)處理語(yǔ)言，它擴(kuò)展了CSS的動(dòng)態(tài)特性。
Less安裝
①安裝nodejs，可選擇版本(8.0)，網(wǎng)址：http://nodejs.cn/download/
②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運(yùn)行輸入cmd） —輸入“node –v”查看版本即可
③基于nodejs在線安裝Less，使用cmd命令“npm install -g less”即可
④檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可
3.4 Less 使用之變量
變量是指沒有固定的值，可以改變的。因?yàn)槲覀僀SS中的一些顏色和數(shù)值等經(jīng)常使用。
@變量名:值;- 必須有@為前綴
- 不能包含特殊字符
- 不能以數(shù)字開頭
- 大小寫敏感
3.5 Less 編譯
vocode Less 插件
Easy LESS 插件用來(lái)把less文件編譯為css文件
安裝完畢插件，重新加載下 vscode。
只要保存一下Less文件，會(huì)自動(dòng)生成CSS文件。
3.6 Less 嵌套
// 將css改為less #header .logo {width: 300px; }#header {.logo {width: 300px;} }如果遇見 （交集|偽類|偽元素選擇器） ，利用&進(jìn)行連接
a:hover{color:red; } a{&:hover{color:red;} }3.7 Less 運(yùn)算
任何數(shù)字、顏色或者變量都可以參與運(yùn)算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術(shù)運(yùn)算。
/*Less 里面寫*/ @witdh: 10px + 5; div {border: @witdh solid red; } /*生成的css*/ div {border: 15px solid red; } /*Less 甚至還可以這樣 */ width: (@width + 5) * 2;- 乘號(hào)（*）和除號(hào)（/）的寫法
- 運(yùn)算符中間左右有個(gè)空格隔開 1px + 5
- 對(duì)于兩個(gè)不同的單位的值之間的運(yùn)算，運(yùn)算結(jié)果的值取第一個(gè)值的單位
- 如果兩個(gè)值之間只有一個(gè)值有單位，則運(yùn)算結(jié)果就取該單位
四、rem適配方案
1.讓一些不能等比自適應(yīng)的元素，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候，等比例適配當(dāng)前設(shè)備。
2.使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，然后頁(yè)面元素使用rem做尺寸單位，當(dāng)html字體大小變化元素尺寸也會(huì)發(fā)生變化，從而達(dá)到等比縮放的適配。
技術(shù)方案：
1.less+rem+媒體查詢
2.lflexible.js+rem
總結(jié)：
兩種方案現(xiàn)在都存在。
方案2 更簡(jiǎn)單，現(xiàn)階段大家無(wú)需了解里面的js代碼。
rem實(shí)際開發(fā)適配方案1
①假設(shè)設(shè)計(jì)稿是750px
②假設(shè)我們把整個(gè)屏幕劃分為15等份（劃分標(biāo)準(zhǔn)不一可以是20份也可以是10等份）
③每一份作為html字體大小，這里就是50px
④那么在320px設(shè)備的時(shí)候，字體大小為320/15就是 21.33px
⑤用我們頁(yè)面元素的大小除以不同的 html字體大小會(huì)發(fā)現(xiàn)他們比例還是相同的
⑥比如我們以750為標(biāo)準(zhǔn)設(shè)計(jì)稿
⑦一個(gè)100100像素的頁(yè)面元素在 750屏幕下， 就是 100/ 50 轉(zhuǎn)換為rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字體大小為21.33 則 2rem= 42.66px 此時(shí)寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經(jīng)能實(shí)現(xiàn)不同屏幕下 頁(yè)面元素盒子等比例縮放的效果
總結(jié)：
①最后的公式：頁(yè)面元素的rem值 = 頁(yè)面元素值（px） / （屏幕寬度 / 劃分的份數(shù)）
②屏幕寬度/劃分的份數(shù)就是 htmlfont-size 的大小
③或者：頁(yè)面元素的rem值 = 頁(yè)面元素值（px） / html font-size 字體大小
五、 蘇寧首頁(yè)
蘇寧首頁(yè)地址 ：蘇寧首頁(yè)
1、 技術(shù)選型
方案：我們采取單獨(dú)制作移動(dòng)頁(yè)面方案
技術(shù)：布局采取rem適配布局（less + rem + 媒體查詢）
設(shè)計(jì)圖： 本設(shè)計(jì)圖采用 750px 設(shè)計(jì)尺寸
2、搭建文件結(jié)構(gòu)
3、設(shè)置視口標(biāo)簽以及引入初始化樣式
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css">4、設(shè)置公共common.less文件
- 新建common.less 設(shè)置好最常見的屏幕尺寸，利用媒體查詢?cè)O(shè)置不同的html字體大小，因?yàn)槌耸醉?yè)其他頁(yè)面也需要
- 我們關(guān)心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
- 劃分的份數(shù)我們定為 15等份
- 因?yàn)槲覀僷c端也可以打開我們蘇寧移動(dòng)端首頁(yè)，我們默認(rèn)html字體大小為 50px，注意這句話寫到最上面
六、rem 適配方案2
手機(jī)淘寶團(tuán)隊(duì)出的簡(jiǎn)潔高效 移動(dòng)端適配庫(kù)
我們?cè)僖膊恍枰趯懖煌聊坏拿襟w查詢，因?yàn)槔锩鎗s做了處理
它的原理是把當(dāng)前設(shè)備劃分為10等份，但是不同設(shè)備下，比例還是一致的。
我們要做的，就是確定好我們當(dāng)前設(shè)備的html 文字大小就可以了
比如當(dāng)前設(shè)計(jì)稿是 750px， 那么我們只需要把 html 文字大小設(shè)置為 75px(750px / 10) 就可以
里面頁(yè)面元素rem值： 頁(yè)面元素的px 值 / 75
剩余的，讓flexible.js來(lái)去算
github地址：https://github.com/amfe/lib-flexible
總結(jié)：
因?yàn)閒lexible是默認(rèn)將屏幕分為10等分
但是當(dāng)屏幕大于750的時(shí)候希望不要再去重置html字體了
所以要自己通過(guò)媒體查詢?cè)O(shè)置一下
并且要把權(quán)重提到最高
VSCode px 轉(zhuǎn)換rem 插件 cssrem
因?yàn)閏ssrem中css自動(dòng)轉(zhuǎn)化為rem是參照默認(rèn)插件的16轉(zhuǎn)換的所以需要自己配置
總結(jié)
以上是生活随笔為你收集整理的移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Nodejs 操作 MongoDb 数据
- 下一篇： ES6~ES12——Array Incl