- rem是相对于根元素的字体大小来算大小的
- 想做移动端的话需要在html文件夹
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
不加会以980px渲染，手机不足980那么页面就会整体缩小
- 实现rem响应式开发步骤
1.找到参照比例 例如设计稿比例=》一般是750px，在这个比例下，html.fontsize 一般初始值
html {
font-size: 100px;
// 750px设计稿中，1REM = 100px 为了方便计算
}
.box {
width: 328px; // 3.28rem
height: 164px; // 16.4rem
}
2.我们需要根据当前设备的宽度，计算相对于设计稿750来讲，缩放比例，从而rem的转换比例，也跟着缩放。rem和px的换算比例一改，则所有之前以rem为单位的样式也会随着缩放 这一步需要js实现
(function () {
const computed = () => {
// 获取设备宽度
let html = document.documentElement
let deviceW = html.clientWidth
let designW = 750
if(deviceW > designW) {
html.style.fontSize = '100px'
}
// 750/100 =deviceW/? designW/100 =deviceW/? 问号就是设备对应按比例缩放显示元素像素大小
let ratio = deviceW * 100 / designW
html.style.fontSize=ratio + 'px
}
computed()
window.addEventLister('resize', computed)
})
- 我们一般还会给页面设置最大宽度750，超过这个宽度，不再让rem继续变大了，内容居中，左右两边空出来,设置一个root盒子，手动样式max-width：750px 居中。
：以上是没有用任何插件实现的rem响应式布局。其实还有插件的，接下来我们来看看插件如何实现。
插件
-
lib-flexible 设置rem和px换算比例的，根据设备的宽度自动计算。
html.style.fontSize = 设备宽度/ 10 + 'px' 在750设计稿中，1rem=75px 在375设计稿中，1rem = 37.5px
-
postcss-pxtorem 可以把我们写的px单位，按照当时的换算比例，自动换成rem，不需要我们自己算。
-
加配置的步骤
在webpack.config.js中
const px2rem = require('postcss-pxtorem')
// 在插件中
px2rem({
rootValue: 75,// 基于lib-flexible，750px设计稿， 就是设置1REM=75px，此时在webpack编译的时候，我们也需要让px2rem插件，按照1rem=75px，把我们测出来并且编写的px样式，自动转换为rem。
propList: ['*'] // 对所有文件都生效
})
- 在入口中index.js，导入lib-flexible,确保不同设备中，可以等比例缩放
- 手动设置设备宽度超过750后不再继续放大
