rem布局

rem （font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

pxtorem

在插件中點擊小齒輪，選擇擴展設置 找到 Root font Size 默認值為16 將其改為你設置的根元素的font-size的大小就可以了。
參考文檔：rem布局
rem轉換器：http://www.ofmonkey.com/front/rem
vscode插件：px to rem
![[1280X1280 (4).PNG]]

計算規則

REM的計算公式
例:html 設置font-size:16px 1rem = 16px 那么640px = 640/16 =40rem 建議設置為100px 方便計算 首先，給頁面的html定義一個100px的 html{ font-size:100px;}/設定基礎rem/ 1rem / 100px. /16px

案例：rem相對于html來設置大小

<style>html{font-size: 30px;}body{font-size: 16px;}.big{font-size: 20px;}.demo{font-size: 20px;}.demo2{font-size: 1.5em;}.demo3{font-size: 1.5rem;}</style><div class="demo">hello1</div><div class="big"><!-- 相對于父級的倍數大小 --><div class="demo2">hello2</div></div><div class="big"><!-- 相對于根標簽html的倍數大小 --><div class="demo3">hello3</div></div>

案例二：使用rem布局移動端頁面【蘇寧易購】 [參考已經寫好的代碼]
適配三個尺寸 750/540/375
meta屬性

<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1"/> 

設計圖是幾倍圖

為什么有：一倍圖，二倍圖，三倍圖，四倍圖

移動端項目接口

官網地址： https://m.lrts.me/ 編寫懶人聽書移動端首頁及跳轉詳情
首頁數據接口地址：https://m.lrts.me/ajax/getHomePage
詳情頁數據接口地址：https://m.lrts.me/ajax/getBookDetail?bookId=43072454
安裝chrome插件:json
極簡插件:https://chrome.zzzmh.cn/
鮮花網圖片不能訪問,添加meta即可

<meta name="referrer" content="no-referrer">

參考文檔:https://www.cnblogs.com/ajuan/p/10143939.html
rem能做什么:https://www.jianshu.com/p/378812d439a8
資料:https://blog.csdn.net/m0_60237095/article/details/123634195