rem适配

时间:2021-6-12 作者:qvyue
在移动端的项目中,需要去适配不同的手机屏幕,我们希望实现适配的效果是:与屏幕大小相关,以按钮为例:在大屏手机,按钮的宽高都大些,在小屏手机上尺寸小写
rem的布局原理:

1:单位,用相对单位rem为单位,rem相对于html的font-size计算的
html { font-size: 16px } => 1rem : 16px width=2rem 36px
html { font-size: 40px } => 1rem : 40px width=2rem 80px
2:动态的不同屏幕设置不同的html font-size,屏幕越小,font-size就越小
1:媒体查询,@media screen
2:原生js,监听屏幕的变化resize事件,动态的修改font-size即可

在使用Vant时,Vant中的样式默认使用px为单位,如果需要使用rem为单位,官方推荐使用一下两个巩工具,来达到目标
postcss-pxtorem 是一款postcss插件,可用于将单位转换为rem(写px,自动转换成rem)
lib-flexible 用于设置rem基准值,可以动态的设置html font-size的基准值
使用流程:
1:安装包
作用:把px单位自动转成rem单位 (作用: 就是之前安装的vscode的插件的作用)
yarn add postcss-pxtorem -D

 修改rem基准值的js插件   需要在打包后需要使用
  作用: 根据设置屏幕的宽度去调整rem的值(html标签上font-size的大小)
  它的默认计算方式是屏幕宽度的1/10,默认值是37.5
  yarn add amfe-flexible

2:新建配置文件postcss.config.js
在里面配置以下代码:
module.exports = {
plugins: {
‘postcss-pxtorem’: {
rootValue: 37.5,
propList: [‘*’]
}
}
}
配置postcss插件(37.5计算方式=> 屏幕宽度/10),设计图对应的标准屏,其他屏幕会自动自适应进行缩放,在使用rem布局之后,眼中应该只有标准屏,其他屏幕进行自适应
配置好postcss文件之后,编写的px会自动转换成rem

rem适配
image.png

实际效果:

rem适配
image.png

3、引入flexible
最后,入口文件main.js导入amfe-flexible(动态的设置html font-size) ,公式(屏幕宽/10)
import ‘amfe-flexible’
它会根据手机尺寸来调整rem 的基准值:HTML标签上的font-size

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。