當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）

發布時間：2024/7/5 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

移動web開發之rem布局

一、rem基礎

rem單位

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

不同的是rem的基準是相對于html元素的字體大小。

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

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

rem的優勢：父元素文字大小可能不一致，但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。

二、媒體查詢

2.1 什么是媒體查詢

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

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

2.2 媒體查詢語法規范

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

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

1. mediatype 查詢類型

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

2. 關鍵字

? 關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。

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

3. 媒體特性

每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且了解三個。

注意他們要加小括號包含

案例：根據頁面寬度改變背景變色
實現思路：
① 按照從大到小的或者從小到大的思路
② 注意我們有最大值 max-width 和最小值 min-width都是包含等于的
③ 當屏幕小于540像素，背景顏色變為藍色（x <= 539）
④ 當屏幕大于等于540像素并且小于等于 969像素的時候背景顏色為綠色 ( 540=<x <= 969）
⑤ 當屏幕大于等于 970像素的時候，背景顏色為紅色（ x >= 970）

<!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,設置我們想要的樣式max-width 最大寬度為800px,小于等于800px *//* 媒體查詢可以根據不同的屏幕尺寸來設置不同的樣式 *//* 寬度小于540px時,背景顏色變為粉色 */@media screen and (max-width: 539px){body {background-color: blue;}}/* 寬度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;}}/* 寬度大于970px時,背景顏色變為紅色 */@media screen and (min-width: 970px) {body {background-color: red;}}</style></head><body></body> </html>

4. 媒體查詢書寫規則

screen還有and必須帶上不能省略的
我們的數字后面必須跟單位970px,這個px不能省略的

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

媒體查詢從小到大優勢代碼分析:

<!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,設置我們想要的樣式max-width 最大寬度為800px,小于等于800px *//* 媒體查詢可以根據不同的屏幕尺寸來設置不同的樣式 *//* 寬度小于等于800px時,背景顏色變為粉色 */@media screen and (max-width: 800px){body {background-color: pink;}}/* 寬度小于等于500px時,背景顏色變為紫色 */@media screen and (max-width: 500px){body {background-color: purple;}}</style></head><body></body> </html>

2.3 媒體查詢+rem實現元素動態大小變化

rem單位是跟著html來走的，有了rem頁面元素可以設置不同大小尺寸
媒體查詢可以根據不同設備寬度來修改樣式
媒體查詢+rem 就可以實現不同設備寬度，實現頁面元素大小的動態變化

案例：媒體查詢+rem實現元素變化:

<!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; /* 行高等于高度即可實現文字垂直居中的效果 */}/* 從小到大的順序 */@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">購物車</div></body> </html>

2.4 引入資源（理解）

當樣式比較繁多的時候，我們可以針對不同的媒體使用不同 stylesheets（樣式表）。
原理，就是直接在link中判斷設備的尺寸，然后引用不同的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">/* 當屏幕大于等于640ox以上時,讓div一行顯示2個 *//* 當屏幕小于640px時,讓div一行顯示1個 *//* 一個建議:媒體查詢最好的代碼書寫方法是"從小到大” *//* 引入資源就是針對不同的屏幕尺寸調用不同的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 基礎

3.1 維護css弊端

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

CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
不方便維護及擴展，不利于復用。
CSS 沒有很好的計算能力
非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼項目。

3.2 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安裝

①安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/

②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd） —輸入“node –v”查看版本即可

③基于nodejs在線安裝Less，使用cmd命令“npm install -g less”即可

④檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可

3.4 Less 使用之變量

變量是指沒有固定的值，可以改變的。因為我們CSS中的一些顏色和數值等經常使用。

@變量名:值;

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

@color: pink;

3.5 Less 編譯

vocode Less 插件

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

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

只要保存一下Less文件，會自動生成CSS文件。

3.6 Less 嵌套

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

如果遇見（交集|偽類|偽元素選擇器），利用&進行連接

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

3.7 Less 運算

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

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

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

四、rem適配方案

1.讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備。

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

技術方案：

1.less+rem+媒體查詢

2.lflexible.js+rem

總結：

兩種方案現在都存在。

方案2 更簡單，現階段大家無需了解里面的js代碼。

rem實際開發適配方案1

①假設設計稿是750px

②假設我們把整個屏幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）

③每一份作為html字體大小，這里就是50px

④那么在320px設備的時候，字體大小為320/15就是 21.33px

⑤用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的

⑥比如我們以750為標準設計稿

⑦一個100100像素的頁面元素在 750屏幕下，就是 100/ 50 轉換為rem 是 2rem2rem 比例是1比1

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

⑨但是已經能實現不同屏幕下頁面元素盒子等比例縮放的效果

總結：

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

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

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

五、蘇寧首頁

蘇寧首頁地址：蘇寧首頁

1、技術選型

方案：我們采取單獨制作移動頁面方案

技術：布局采取rem適配布局（less + rem + 媒體查詢）

設計圖：本設計圖采用 750px 設計尺寸

2、搭建文件結構

3、設置視口標簽以及引入初始化樣式

4、設置公共common.less文件

新建common.less 設置好最常見的屏幕尺寸，利用媒體查詢設置不同的html字體大小，因為除了首頁其他頁面也需要
我們關心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
劃分的份數我們定為 15等份
因為我們pc端也可以打開我們蘇寧移動端首頁，我們默認html字體大小為 50px，注意這句話寫到最上面

六、rem 適配方案2

手機淘寶團隊出的簡潔高效移動端適配庫

我們再也不需要在寫不同屏幕的媒體查詢，因為里面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轉換的所以需要自己配置

總結

以上是生活随笔為你收集整理的移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Nodejs 操作 MongoDb 数据
下一篇： ES6~ES12——Array Incl