前言

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

一、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

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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是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的介绍相关推荐

PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
移动Web(rem less Vw/Vh/bootstra)
移动端适配方案 flex + rem单位,做适配效果(比如淘宝和小米移动端) 当前市场最多 flex +viewport width/vh单位做适配效果(比如 B站移动端新兴让flex做布局(盒 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
在前端开发过程中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询.百分比.rem.和vw /vh,本文主要分析px在移动端布局中的不足,以及几种不同的自适应解决方案一 ...
css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
vw 前端_css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...

rem和vw,vh的介绍

rem的介绍

前言

一、rem是什么

二、手写rem布局

三、rem适配方案

四、vw,vh适配方案

rem和vw,vh的介绍相关推荐

最新文章

热门文章