rem (root em)是一個相對單位，類似于em，em是父元素字體大小。
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出焉耆免費(fèi)做網(wǎng)站回饋大家。
不同的是rem的基準(zhǔn)是相對于html元素的字體大小。
比如，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px。
重慶分公司
重慶分公司
/* 根html 為 12px */
html {
font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */
div {
font-size: 2rem;
}
rem的優(yōu)勢：父元素文字大小可能不一致， 但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。
媒體查詢（Media Query）是CSS3新語法。
使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式
當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面
目前針對很多蘋果手機(jī)、Android手機(jī)，平板等設(shè)備都用得到多媒體查詢
用 @media開頭 注意@符號
mediatype 媒體類型
關(guān)鍵字 and not only
media feature 媒體特性必須有小括號包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型
關(guān)鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
and：可以將多個媒體特性連接到一起，相當(dāng)于“且”的意思。
not：排除某個媒體類型，相當(dāng)于“非”的意思，可以省略。
only：指定某個特定的媒體類型，可以省略。
每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。我們暫且了解三
個。
注意他們要加小括號包含
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到
大來寫，這樣代碼更簡潔
CSS 是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域）等概念。
CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
CSS 沒有很好的計(jì)算能力
非前端開發(fā)工程師來講，往往會因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼項(xiàng)目。
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴(kuò)展語言，也成為CSS預(yù)處理器。
做為 CSS的一種形式的擴(kuò)展，它并沒有減少CSS的功能，而是在現(xiàn)有的CSS語法上，為CSS加入程序式語言的特
性。
它在CSS 的語法基礎(chǔ)之上，引入了變量，Mixin（混入），運(yùn)算以及函數(shù)等功能，大大簡化了 CSS 的編寫，并且降
低了 CSS的維護(hù)成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情。
Less中文網(wǎng)址： http://lesscss.cn/
常見的CSS預(yù)處理器：Sass、Less、Stylus
一句話：Less是一門 CSS 預(yù)處理語言，它擴(kuò)展了CSS的動態(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 ”查看版本即可
Less 使用之變量
變量是指沒有固定的值，可以改變的。因?yàn)槲覀僀SS中的一些顏色和數(shù)值等經(jīng)常使用。
@變量名:值;
必須有@為前綴
不能包含特殊字符
不能以數(shù)字開頭
大小寫敏感
@color: pink;
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less文件編譯為css文件
安裝完畢插件，重新加載下 vscode。
只要保存一下Less文件，會自動生成CSS文件。
Less 嵌套
// 將css改為less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
如果遇見 （交集|偽類|偽元素選擇器） ，利用&進(jìn)行連接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
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;
乘號（*）和除號（/）的寫法
運(yùn)算符中間左右有個空格隔開 1px + 5
對于兩個不同的單位的值之間的運(yùn)算，運(yùn)算結(jié)果的值取第一個值的單位
如果兩個值之間只有一個值有單位，則運(yùn)算結(jié)果就取該單位
①讓一些不能等比自適應(yīng)的元素，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時候，等比例適配當(dāng)前設(shè)備。
②使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，然后頁面元素使用rem做尺寸單位，當(dāng)html字體大小變
化元素尺寸也會發(fā)生變化，從而達(dá)到等比縮放的適配。
技術(shù)方案：
①less+rem+媒體查詢
②lflexible.js+rem
總結(jié)：
兩種方案現(xiàn)在都存在。
方案2 更簡單，現(xiàn)階段大家無需了解里面的js代碼。
①假設(shè)設(shè)計(jì)稿是750px
②假設(shè)我們把整個屏幕劃分為15等份（劃分標(biāo)準(zhǔn)不一可以是20份也可以是10等份）
③每一份作為html字體大小，這里就是50px
④那么在320px設(shè)備的時候，字體大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字體大小會發(fā)現(xiàn)他們比例還是相同的
⑥比如我們以750為標(biāo)準(zhǔn)設(shè)計(jì)稿
⑦一個100?100像素的頁面元素在 750屏幕下， 就是 100/ 50 轉(zhuǎn)換為rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字體大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經(jīng)能實(shí)現(xiàn)不同屏幕下 頁面元素盒子等比例縮放的效果
總結(jié)：
①最后的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數(shù)）
②屏幕寬度/劃分的份數(shù)就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小
蘇寧首頁地址 ： 蘇寧首頁
1、 技術(shù)選型
方案：我們采取單獨(dú)制作移動頁面方案
技術(shù)：布局采取rem適配布局（less + rem + 媒體查詢）
設(shè)計(jì)圖： 本設(shè)計(jì)圖采用 750px 設(shè)計(jì)尺寸
2、搭建文件結(jié)構(gòu)
3、設(shè)置視口標(biāo)簽以及引入初始化樣式
4、設(shè)置公共common.less文件
新建common.less 設(shè)置好最常見的屏幕尺寸，利用媒體查詢設(shè)置不同的html字體大小，因?yàn)槌耸醉撈渌?br> 頁面也需要
我們關(guān)心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、
750px
劃分的份數(shù)我們定為 15等份
因?yàn)槲覀僷c端也可以打開我們蘇寧移動端首頁，我們默認(rèn)html字體大小為 50px，注意這句話寫到最上面
手機(jī)淘寶團(tuán)隊(duì)出的簡潔高效 移動端適配庫
我們再也不需要在寫不同屏幕的媒體查詢，因?yàn)槔锩鎗s做了處理
它的原理是把當(dāng)前設(shè)備劃分為10等份，但是不同設(shè)備下，比例還是一致的。
我們要做的，就是確定好我們當(dāng)前設(shè)備的html 文字大小就可以了
比如當(dāng)前設(shè)計(jì)稿是 750px， 那么我們只需要把 html 文字大小設(shè)置為 75px(750px / 10) 就可以
里面頁面元素rem值： 頁面元素的px 值 / 75
剩余的，讓flexible.js來去算
github地址： https://github.com/amfe/lib-flexible
總結(jié)：
因?yàn)閒lexible是默認(rèn)將屏幕分為10等分
但是當(dāng)屏幕大于750的時候希望不要再去重置html字體了
所以要自己通過媒體查詢設(shè)置一下
并且要把權(quán)重提到最高
VSCode px 轉(zhuǎn)換rem 插件 cssrem
因?yàn)閏ssrem中css自動轉(zhuǎn)化為rem是參照默認(rèn)插件的16轉(zhuǎn)換的所以需要自己配置
掃一掃下面的二維碼，關(guān)注我們，獲取更多精彩活動資訊，有好禮相送哦~
【騰訊云】618云上GO！云服務(wù)器限時秒殺，1核2G首年95元！
【華為云】特惠專區(qū)，多款產(chǎn)品限時特價！
【阿里云】上新必買搶先知，勁爆優(yōu)惠不錯過！
【七牛云】優(yōu)惠專區(qū)，多款云產(chǎn)品限時搶購！
【又拍云】免費(fèi)CDN專區(qū)，10G免費(fèi)大放送！
【知識星球】一個資料分享的站點(diǎn)，各種學(xué)習(xí)資料，隨時分享
微信贊助 微信打賞 支付寶打賞
免責(zé)聲明：本文所有內(nèi)容均為互聯(lián)網(wǎng)上收集而來，僅供學(xué)習(xí)交流，整理文章為傳播相關(guān)技術(shù)，如有侵權(quán)，請聯(lián)系刪除
