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