html
/*根元素的基礎font-size被設定為37.5px，則1rem=37.5px*/
#box1
/*box1的寬度10rem則被計算成寬度為375px，高度為75px，文字大小為18.25px；*/
#box1 .title
/*title的寬度依舊相對於根元素計算，結果為75px*/
綜上所述，rem可以在移動端開發過程中帶來強大的便利性，他或許也有些許缺點，但瑕不掩玉，遠遠被它的眾多優點的光芒覆蓋，也將是未來的趨勢。
使用**查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置。
less+rem+**查詢
flexible.js+rem
rem +**查詢 + less 技術
動態設定 html 標籤 font-size 大小
假設設計稿是750px
假設把整個螢幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）
每乙份作為html字型大小，這裡就是50px
那麼在320px裝置的時候，字型大小為320/15就是 21.33px
用頁面元素的大小除以不同的 html字型大小會發現他們的比例還是相同的
比如以750為標準設計稿
乙個100* 100畫素的頁面元素在750螢幕下， 就是 100/ 50 轉換為rem 是 2rem*2rem 比例是1比1
320螢幕下，html字型大小為21.33則 2rem=42.66px此時寬和高都是 42.66但是寬和高的比例還是 1比1
但是已經能實現不同螢幕下頁面元素盒子等比例縮放的效果
元素大小取值方法
最後的公式：頁面元素的rem值 = 頁面元素值（px）/ （螢幕寬度 / 劃分的份數）
螢幕寬度/劃分的份數就是 htmlfont-size 的大小
或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字型大小
例項:比如當前設計稿是 750px， 那麼我們只需要把 html 文字大小設定為 75px(750px / 10) 就可以了
裡面頁面元素rem值： 頁面元素的px 值 / 75
剩餘的尺寸，讓flexible.js來去算
總結：因為flexible是預設將螢幕分為10等分
但是當螢幕大於750的時候希望不要再去重置html字型了
所以要自己通過**查詢設定一下並且要把權重提到最高
例：方案：我們採取單獨製作移動頁面方案
技術：布局採取 rem 適配布局（ less + rem + **查詢）
設計圖：本設計圖採用 750px 設計尺寸
搭建相關資料夾結構
設定視口標籤以及引入初始化樣式
設定公共 common.less 檔案
新建 common.less 設定好最常見的螢幕尺寸，利用**查詢設定不同的 html 字型大小，因為除了首頁其他頁面也需要
通用的尺寸有 320px 、 360px 、 375px 、 384px 、 400px 、 414px 、 424px 、 480px 、 540px 、 720px 、 750px
劃分的份數定為 15 等份
因為pc端也可以開啟移動端首頁，預設html字型大小為50px，注意這句話寫到最上面
新建 index.less 檔案
新建 index.less 這裡面寫首頁的樣式
將剛才設定好的 common.less 引入到 index.less 裡面
//在 index.less 中匯入 common.less 檔案
@import 「common」
生成 index.css 引入到 index.html 裡面
body樣式
body技術：布局採取 rem 適配布局flexible.js + rem
設計圖：本設計圖採用 750px 設計尺寸
搭建相關資料夾結構
設定視口標籤以及引入初始化樣式
name
="viewport"
content
="width=device
width, user scalable=no,
initial scale=1.0, maximum scale=1.0, minimum scale=1.0"
>
rel=
"stylesheet"
href
="css/index.css"
>
src=「js/flexible.js」
>
script
>
body移動Web開發 移動端常見布局 rem布局
三 rem 查詢 四 less使用 建新檔案，字尾.less 1 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。rem的基準是相對於html元素的字型大小。比如 根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24p...
移動端rem布局
時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...
rem移動端布局
1 rem是css3新增的相對長度單位，是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2，dpr 3 window.devicepix...