css中的rem和vm的关系
rem单位：font size of the root element.rem就是相对于根元素<html>的font-size来做计算
视窗单位：
vw : 1vw 等于视窗宽度的1%
vh : 1vh 等于视窗高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
html为什么字体大小达不到10px
默认浏览器字体是16px 也就是1rem=16px ； 如果你设置html为10px ， 那意思就是让1rem=10px了，（但是谷歌浏览器字体最小是12px，所以在谷歌浏览器上1rem=12px），如果你设置宽度为20px，那就是2rem（非谷歌浏览器）。
怎么快速将css中的px替换成rem
用 gulp-replace 写个任务替换rem。 var replace = require('gulp-replace');gulp.task('pxToRem', function(){ return gulp.src('*.html') .pipe(replace(/(\d+)px/g, function(match, p1){ return Number(p1) / 10 + 'rem'; })) .pipe(gulp.dest('dir'));});
js怎样做自适应屏幕
方法如下：
1、安装postcss-px2rem 、px2rem-loader、lib-flexible
2、在根目录src中新建util目录下新建rem.js等比适配文件
找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js，修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了，当然if判断是根据自己需求的调整。
目的：因为lib-flexible的源码是针对移动端的设计方案，我们要实现PC的自适应所以屏幕尺寸也要更换。
3、在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码 ，所有我们需要引入我们改过的文件)
4、在vue.config.js中配置插件
rem模式有什么用
1. rem模式是一种相对单位，可以用来设置网页元素的尺寸。rem是相对于根元素（即<html>标签）的字体大小来计算的。
2. 使用rem单位的好处是可以实现响应式布局，适应不同屏幕尺寸的设备。通过设置根元素的字体大小，可以统一调整整个页面中元素的尺寸。
3. 使用rem单位的步骤如下：
- 设置根元素的字体大小：通过css样式表中的html选择器，设置font-size属性的值为一个固定的像素值或者百分比值。例如，设置html { font-size: 16px; }表示根元素的字体大小为16像素。
- 使用rem单位的元素：在设置元素的尺寸时，使用rem单位而不是固定的像素值。例如，如果要设置一个元素的宽度为100像素，则可以使用width: 6.25rem;（假设根元素的字体大小为16像素）。
- 动态调整根元素的字体大小：可以通过javascript代码来根据设备的屏幕尺寸动态调整根元素的字体大小，从而实现响应式布局。例如，可以使用window对象的resize事件来监听屏幕尺寸的变化，并根据需要调整根元素的字体大小。
总结：rem模式可以让我们以相对单位来设置元素的尺寸，实现响应式布局，提升网页在不同设备上的适配性。通过设置根元素的字体大小，然后使用rem单位设置元素尺寸，可以轻松实现网页的适应性调整。