移動(dòng) web 開發(fā) —— rem 布局

1. rem 基礎(chǔ)

rem 單位

rem（root em）是一個(gè)相對單位，類似于 em，em 是父元素字體大小。

不同的是 rem 的基準(zhǔn)是相對于 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)勢：父元素文字大小可能不一致， 但是整個(gè)頁面只有一個(gè) html，可以很好來控制整個(gè)頁面的元素大小。

2. 媒體查詢

什么是媒體查詢

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

  • 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
  • @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式
  • 當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面
  • 目前針對很多蘋果手機(jī)、Android 手機(jī)，平板等設(shè)備都用得到多媒體查詢

媒體查詢語法規(guī)范

  • 用 @media 開頭 注意 @ 符號
  • mediatype 媒體類型
  • 關(guān)鍵字 and not only
  • media feature 媒體特性必須有小括號包含
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  1. mediatype 查詢類型

? 將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型

  1. 關(guān)鍵字

? 關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件。

  • and：可以將多個(gè)媒體特性連接到一起，相當(dāng)于 “且” 的意思。
  • not：排除某個(gè)媒體類型，相當(dāng)于 “非” 的意思，可以省略。
  • only：指定某個(gè)特定的媒體類型，可以省略。

  1. 媒體特性

    每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。我們暫且了解三個(gè)。

    注意他們要加小括號包含

  1. 媒體查詢書寫規(guī)則

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

3. Less 基礎(chǔ)

維護(hù) CSS 弊端

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

  • CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
  • 不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
  • CSS 沒有很好的計(jì)算能力
  • 非前端開發(fā)工程師來講，往往會因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼項(xiàng)目。

Less 介紹

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 的動(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 查看版本即可

Less 使用之變量

變量是指沒有固定的值，可以改變的。因?yàn)槲覀?CSS 中的一些顏色和數(shù)值等經(jīng)常使用。

@變量名:值;
  • 必須有 @ 為前綴
  • 不能包含特殊字符
  • 不能以數(shù)字開頭
  • 大小寫敏感
@color: pink;

Less 編譯 vocode Less 插件

Easy LESS 插件用來把 less 文件編譯為 css 文件

安裝完畢插件，重新加載下 vscode。

只要保存一下 Less 文件，會自動(dòng)生成 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)算符中間左右有個(gè)空格隔開 1px + 5
  • 對于兩個(gè)不同的單位的值之間的運(yùn)算，運(yùn)算結(jié)果的值取第一個(gè)值的單位
  • 如果兩個(gè)值之間只有一個(gè)值有單位，則運(yùn)算結(jié)果就取該單位

4. rem 適配方案

  1. 讓一些不能等比自適應(yīng)的元素，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候，等比例適配當(dāng)前設(shè)備。

  2. 使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置 html 的字體大小，然后頁面元素使用 rem 做尺寸單位，當(dāng) html 字體大小變化元素尺寸也會發(fā)生變化，從而達(dá)到等比縮放的適配。

技術(shù)方案：

  1. less + rem + 媒體查詢

  2. lflexible.js + rem

總結(jié)：

兩種方案現(xiàn)在都存在。

方案 2 更簡單，現(xiàn)階段大家無需了解里面的 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

⑤用我們頁面元素的大小除以不同的 html 字體大小會發(fā)現(xiàn)他們比例還是相同的

⑥比如我們以 750 為標(biāo)準(zhǔn)設(shè)計(jì)稿

⑦一個(gè) 100*100 像素的頁面元素在 750 屏幕下， 就是 100/ 50 轉(zhuǎn)換為 rem 是 2rem*2rem 比例是 1 比 1

⑧320屏幕下，html 字體大小為 21.33 則 2rem= 42.66px 此時(shí)寬和高都是 42.66 但是寬和高的比例還是 1 比 1

⑨但是已經(jīng)能實(shí)現(xiàn)不同屏幕下 頁面元素盒子等比例縮放的效果

總結(jié)：

①最后的公式：頁面元素的 rem 值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數(shù)）

②屏幕寬度/劃分的份數(shù)就是 htmlfont-size 的大小

③或者：頁面元素的 rem 值 = 頁面元素值（px） / html font-size 字體大小

5. 練習(xí)

蘇寧首頁地址 ：蘇寧首頁

1、 技術(shù)選型

方案：我們采取單獨(dú)制作移動(dòng)頁面方案

技術(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è)置好最常見的屏幕尺寸，利用媒體查詢設(shè)置不同的 html 字體大小，因?yàn)槌耸醉撈渌撁嬉残枰?/li>
  • 我們關(guān)心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
  • 劃分的份數(shù)我們定為 15 等份
  • 因?yàn)槲覀?pc 端也可以打開我們蘇寧移動(dòng)端首頁，我們默認(rèn) html 字體大小為 50px，注意這句話寫到最上面

6. rem 適配方案 2

手機(jī)淘寶團(tuán)隊(duì)出的簡潔高效 移動(dòng)端適配庫

我們再也不需要在寫不同屏幕的媒體查詢，因?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)?flexible 是默認(rèn)將屏幕分為 10 等分

但是當(dāng)屏幕大于 750 的時(shí)候希望不要再去重置 html 字體了

所以要自己通過媒體查詢設(shè)置一下

并且要把權(quán)重提到最高

VSCode px 轉(zhuǎn)換 rem 插件 cssrem

因?yàn)?cssrem 中 css 自動(dòng)轉(zhuǎn)化為 rem 是參照默認(rèn)插件的 16 轉(zhuǎn)換的所以需要自己配置

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容