移動端rem布局總結（Reset257）

總結：rem有兩種適配方案（做移動端）

學得七七八八，記下來，記下來…?

一、**查詢

1、作用：讓手機端，平板端和電腦端的網頁顯示出不同的css效果。（主要是尺寸、大小）

2、兩種語法

第一種


/* 表示螢幕尺寸最大值為800px */
@media screen and
(max-width:
800px)
p}/* 表示螢幕尺寸為800px ~ 1200px */
@media screen and
(min-width:
800px)
and(max-width:
1200px)
p}/* 表示螢幕尺寸最小值為1200px */
@media screen and
(min-width:
1200px)
p}<
/style>

就是把不同尺寸的都分一類出來寫那樣子

第二種

<
!-- 第二種方式 --
>
"stylesheet"  media=
"screen and (max-width: 800px)" href=
"./**查詢1.css"
>
"stylesheet"  media=
"screen and (min-width: 800px) and (max-width: 1200px)" href=
"./**查詢2.css"
>
"stylesheet"  media=
"screen and (min-width: 1200px)" href=
"./**查詢3.css"
>

這種就比較像引入鏈結式的，個人感覺第一種比較常用

**查詢mdn官方文件

二、rem的概念

1、rem是什麼?

rem (font size of the root element)是指相對於根元素（html 標籤）的字型大小的單位。簡單的說它就是一乙個相對單位。

2、rem 與 em 的區別

em (font size of the element)是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴根元素，乙個是依賴父元素計算。

3、rem能等比例適配所有螢幕，rem是通過根元素進行適配的，網頁中的根元素指的是 html ，我們通過設定html的字型大小就可以控制rem的大小。

四、需要了解一點less

具體看 ?‍♂️ ?‍♂️ ?‍♂️ less學習筆記

五、方案一： rem + **查詢 + less

終於到正題了，東西有點雜…

1、新建乙個common.less檔案，在裡面書寫**查詢的**，一開始要先思考把頁面分成幾等份，設定每乙個裝置對應的html字型大小（rem是通過根元素進行適配的）。同時要單獨設定在電腦顯示時的html字型大小。

這裡是考慮到設計稿寬度式 750，把介面 15 等份，每乙份就是 50px。同時，把 15 在 less 裡定義成乙個變數 @no，在不同寬度的**查詢裡，用寬度 / @no，快速計算，這樣就可以實現等比縮放

這個地方原理可以多琢磨琢磨?

// 單獨設定手機端介面在電腦顯示時的樣式
html
a // 定義乙個份數15
@no:15;
// 320寬度
@media screen and
(min-width:
320px)
}// 360寬度
@media screen and
(min-width:
360px)
}// 375寬度，iphone 6 / 7 / 8
@media screen and
(min-width:
375px)
}// 384寬度
@media screen and
(min-width:
384px)
}// 400寬度
@media screen and
(min-width:
400px)
}// 414寬度
@media screen and
(min-width:
414px)
}// 424寬度
@media screen and
(min-width:
424px)
}// 480寬度
@media screen and
(min-width:
480px)
}// 540寬度
@media screen and
(min-width:
540px)
}// 720寬度
@media screen and
(min-width:
720px)
}// 750寬度
@media screen and
(min-width:
750px)
}// 768寬度
@media screen and
(min-width:
768px)
}

2、寫好common.less檔案之後，新建乙個index.less檔案，在less裡面編寫首頁樣式讓他自動生成css檔案。

同時匯入common檔案，@import "common"; 可以不用加檔案字尾名並且因為index.css 匯入了 common.css，所以 index.less 不需要 link common.css

// 第一種適配方案 rem + **查詢 + less
@import
"common"
;// @import "common";是匯入comon 樣式，和link 引入有點不一樣
body

3、然後就可以正常地開始書寫樣式，只不過把px單位的設定都轉換成rem，具體計算公式：

頁面元素的rem值 = 設計稿頁面元素值(px) / 設計稿 html font-size 字型大小

例如下面，設計稿得出left的寬度為44px，高度為70px，根據公式，事先定義了一

個變數 @basefont:50

@basefont:50;
.left

我自己對公式的的理解：

由於是在設計稿也就是頁面寬度為750下進行測量的，為了使得頁面在更小的寬度下可以等比例縮放，這裡需要求出在750寬度下，每乙個畫素值對應頁面的rem值，這樣即使換了不同的頁面大小，計算的值是rem，會根據不同html的字型大小進行換算。

750寬度下，字型大小是50px，定義了乙個變數 @basefont:50；因此假設換算的畫素值為88px。xrem / 88px = 1rem / 50px ，由此可得頁面元素的rem值（x） = 設計稿頁面元素值（88）/ 設計稿 html font-size 字型大小（50），即 88 rem / @basefont不要誤會，這裡88後面的rem只是為了讓計算出來的值單位是 rem 才加上去的。

總結：第一種適配方案主要還是通過 rem + **查詢 + less 配合完成，當然在實際寫頁面的時候可以混著彈性盒子來做三欄布局。但由於**查詢需要寫多個裝置的尺寸，顯得有些麻煩。

1、基本思路

不需要在寫不同螢幕的**查詢，因為裡面js做了處理，它的原理是把當前裝置劃分為10等份（和第一種分成15份不一樣），但是不同裝置下，比例還是一致的。我們要做的，就是確定好我們當前裝置的html文字大小就可以了，比如當前設計稿是750px，那麼我們只需要把html文字大小設定為75px(750px/ 10)就可以裡面頁面元素rem值：頁面元素的px值 / 75，剩餘的讓flexible.js來去算。

2、方案準備

在這種適配方案下安裝好外掛程式 cssrem 即可實現畫素自動轉換成 rem，不需要手動去計算頁面元素的px值 / 75，不過要把預設的px轉化進製設定一下。

3、開始寫頁面

@media screen and
(min-width:
750px)
}

理解一下，寫乙個移動端首頁練一練就是了！

移動端rem布局總結（Reset257）

移動端rem布局

rem移動端布局

移動端rem布局

相關推薦