移動WEB開發-rem適配佈局

移動web開發之rem佈局

• rem 基礎
• 媒體查詢
• Less 基礎
• rem 適配方案

1、 rem基礎

一、rem單位

• rem (root em)是一個相對單位，相似於em，em是父元素字體大小。
• 不一樣的是rem的基準是相對於html元素的字體大小。
• rem的優點：父元素文字大小可能不一致， 可是整個頁面只有一個html，能夠很好來控制整個頁面的元素大小。

好比，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是24px。

/\* 根html 爲 12px \*/  
html {  
 font-size: 12px;  
}  
/\* 此時 div 的字體大小就是 24px \*/   
div {  
 font-size: 2rem;  
}

2、媒體查詢

一、什麼是媒體查詢

媒體查詢（Media Query）是CSS3新語法。

• 使用 @media查詢，能夠針對不一樣的媒體類型定義不一樣的樣式
• @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式
• 當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面
• 目前針對不少蘋果手機、Android手機，平板等設備都用獲得多媒體查詢

二、媒體查詢語法規範

• 用 @media開頭 注意@符號
• mediatype 媒體類型
• 關鍵字 and not only
• media feature 媒體特性必須有小括號包含

@media mediatype and|not|only (media feature) {  
 CSS-Code;  
}

(1) mediatype 查詢類型

將不一樣的終端設備劃分紅不一樣的類型，稱爲媒體類型

(2) 關鍵字

關鍵字將媒體類型或多個媒體特性鏈接到一塊兒作爲媒體查詢的條件。

• and：能夠將多個媒體特性鏈接到一塊兒，至關於「且」的意思。
• not：排除某個媒體類型，至關於「非」的意思，能夠省略。
• only：指定某個特定的媒體類型，能夠省略。

(3) 媒體特性

每種媒體類型都具體各自不一樣的特性，根據不一樣媒體類型的媒體特性設置不一樣的展現風格。咱們暫且瞭解三個。

注意他們要加小括號包含

(4) 媒體查詢書寫規則

注意： 爲了防止混亂，媒體查詢咱們要按照從小到大或者從大到小的順序來寫,可是咱們最喜歡的仍是從小到大來寫，這樣代碼更簡潔

/* 1. 媒體查詢通常按照從大到小或者 從小到大的順序來 */
        /* 2. 小於540px 頁面的背景顏色變爲藍色 */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 咱們的頁面顏色改成 綠色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大於等於970 咱們頁面的顏色改成 紅色 */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 還有 and 必須帶上不能省略的 */
        /* 6. 咱們的數字後面必須跟單位  970px   這個 px 不能省略的 */

3、less 基礎

一、維護css弊端

CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）等概念。

• CSS 須要書寫大量看似沒有邏輯的代碼，CSS 冗餘度是比較高的。
• 不方便維護及擴展，不利於複用。
• CSS 沒有很好的計算能力
• 非前端開發工程師來說，每每會由於缺乏 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼項目。

二、Less 介紹

• Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成爲CSS預處理器。
• 作爲 CSS的一種形式的擴展，它並無減小CSS的功能，而是在現有的CSS語法上，爲CSS加入程序式語言的特性。
• 它在CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，而且下降了 CSS的維護成本，就像它的名稱所說的那樣，Less可讓咱們用更少的代碼作更多的事情。
• Less中文網址：http://lesscss.cn/
• 常見的CSS預處理器：Sass、Less、Stylus
• 一句話：Less是一門 CSS 預處理語言，它擴展了CSS的動態特性。

Less安裝

1. 安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/
2. 檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd） ---輸入「node –v」查看版本便可
3. 基於nodejs在線安裝Less，使用cmd命令「npm install -g less」便可
4. 檢查是否安裝成功，使用cmd命令「 lessc -v 」查看版本便可

Less 變量

變量是指沒有固定的值，能夠改變的。由於咱們CSS中的一些顏色和數值等常用。

@變量名:值;

• 必須有@爲前綴
• 不能包含特殊字符
• 不能以數字開頭
• 大小寫敏感

@color: pink;

Less 編譯 vocode Less 插件

• Easy LESS 插件用來把less文件編譯爲css文件
• 安裝完畢插件，從新加載下 vscode。
• 只要保存一下Less文件，會自動生成CSS文件。

Less 嵌套

// 將css改成less  
#header .logo {  
 width: 300px;  
}  
​  
#header {  
 .logo {  
 width: 300px;  
 }  
}

若是碰見 （交集|僞類|僞元素選擇器） ，利用&進行鏈接

a:hover{  
 color:red;  
}  
a{  
 &:hover{  
 color:red;  
 }  
}

Less 運算

• 任何數字、顏色或者變量均可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。

/\*Less 裏面寫\*/  
@witdh: 10px + 5;  
div {  
 border: @witdh solid red;  
}  
/\*生成的css\*/  
div {  
 border: 15px solid red;  
}  
/\*Less 甚至還能夠這樣 \*/  
width: (@width + 5) \* 2;

• 乘號（*）和除號（/）的寫法
• 運算符中間左右有個空格隔開 1px + 5
• 對於兩個不一樣的單位的值之間的運算，運算結果的值取第一個值的單位
• 若是兩個值之間只有一個值有單位，則運算結果就取該單位

4、rem適配方案

• 讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備。
• 使用媒體查詢根據不一樣設備按比例設置html的字體大小，而後頁面元素使用rem作尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。

技術方案：

1. less+rem+媒體查詢
2. lflexible.js+rem

總結：

1. 兩種方案如今都存在。
2. 方案2 更簡單，現階段你們無需瞭解裏面的js代碼。

一、rem實際開發適配方案1

1. 假設設計稿是750px
2. 假設咱們把整個屏幕劃分爲15等份（劃分標準不一能夠是20份也能夠是10等份）
3. 每一份做爲html字體大小，這裏就是50px
4. 那麼在320px設備的時候，字體大小爲320/15就是 21.33px
5. 用咱們頁面元素的大小除以不一樣的 html字體大小會發現他們比例仍是相同的
6. 好比咱們以750爲標準設計稿
7. 一個100_100像素的頁面元素在 750屏幕下， 就是 100/ 50 轉換爲rem 是 2rem_2rem 比例是1比1
8. 320屏幕下， html字體大小爲21.33 則 2rem= 42.66px 此時寬和高都是 42.66 可是寬和高的比例仍是 1比1
9. 可是已經能實現不一樣屏幕下 頁面元素盒子等比例縮放的效果

總結：

• 最後的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數）
• 屏幕寬度/劃分的份數就是 htmlfont-size 的大小
• 或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小

二、 rem 適配方案2

手機淘寶團隊出的簡潔高效 移動端適配庫----`flexible.js`

咱們不再須要在寫不一樣屏幕的媒體查詢，由於裏面js作了處理

它的原理是把當前設備劃分爲10等份，可是不一樣設備下，比例仍是一致的。

咱們要作的，就是肯定好咱們當前設備的html 文字大小就能夠了

好比當前設計稿是 750px， 那麼咱們只須要把 html 文字大小設置爲 75px(750px / 10) 就能夠

裏面頁面元素rem值： 頁面元素的px 值 / 75

剩餘的，讓flexible.js來去算

github地址：https://github.com/amfe/lib-flexible

總結：

• 由於flexible是默認將屏幕分爲10等分，可是當屏幕大於750的時候但願不要再去重置html字體了
• 因此要本身經過媒體查詢設置一下
• 而且要把權重提到最高

• VSCode px 轉換rem 插件 cssrem

  • 由於cssrem中css自動轉化爲rem是參照默認插件的16轉換的因此須要本身配置