rem和vw,vh的介绍

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

rem的介绍

• 前言
• 一、rem是什么
• 二、手写rem布局
• 三、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 postcss-pxtorem@5.1.1 --save-dev

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

import ‘lib-flexible/flexible’;

四、vw,vh适配方案

1.先安装依赖

npm install postcss-px-to-viewport -D 

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

 
module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']},'postcss-px-to-viewport': {viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vwselectorBlackList: ['.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 单位了

rem和vw,vh的介绍

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

rem的介绍

• 前言
• 一、rem是什么
• 二、手写rem布局
• 三、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 postcss-pxtorem@5.1.1 --save-dev

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

import ‘lib-flexible/flexible’;

四、vw,vh适配方案

1.先安装依赖

npm install postcss-px-to-viewport -D 

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

 
module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']},'postcss-px-to-viewport': {viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vwselectorBlackList: ['.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 单位了