8.6 CSS3rem布局
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