rem和vw,vh的介绍

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、rem是什么

rem是相对单位,相当于html页面中font-size的一个字体大小
它可以自适应屏幕的宽高

二、手写rem布局

代码如下（示例）：

rem();  //页面刷新后依然存在

window.onresize=function(){ //每次点击都会重新调用
	rem();
}

function rem(){
let hh=document.documentElement.clientWidth; //html的宽度
let bh=document.body.clientWidth; //body宽度
let h=hh||bh //屏幕的宽度
document.documentElement.style.fontSize=(h/750*100)+'px'	
}

三、rem适配方案

可以安装两个插件
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

安装并引入插件
1.安装依赖

cnpm install lib-flexible [email protected] --save-dev

2. main.js 导入 // 移动端适配

import ‘lib-flexible/flexible’;

四、vw,vh适配方案

1.先安装依赖

npm install postcss-px-to-viewport -D 

2.修改 .postcssrc.js
将根目录下 .postcssrc.js 文件修改如下:

 https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

3.删除之前写的rem的相关代码
在src/main.js 删除如下代码

import 'lib-flexible/flexible.js'

package.json 删除如下代码

"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",

运行起来，F12 元素 css 就是 vw 单位了