用REM解决多屏适配

1. 作用

在项目中引入rem，可以解决多屏适配问题

2. 原因

vant插件中的默认样式都是使用px作为单位，所有移动端的项目就需要来用rem进行适配，方便各种屏幕大小的设备都可以正常的浏览

3. 解决

两个工具包：

posstcss-pxtorem ：可以把项目中的 px 全部转换为 rem

lib-flexible ：根据不同的屏幕宽度，可以动态的设置rem的参考值–>就是html标签的font-size的值。

注意：mafe-flexible 是它的包名不是 lib-flexible

4. 安装包

1 . 把px单位自动转成rem单位
npm i postcss-pxtorem@5.1.1
要指定版本最新版本可能会出现不能正常使用的问题
2. 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
npm i amfe-flexible

5. 配置 postcss

module.exports = {
plugins: {
‘postcss-pxtorem’: {
// 能够把所有元素的px单位转成Rem
// rootValue: 转换px的基准值。
// 例如一个元素宽是75px，则换成rem之后就是2rem。
rootValue: 37.5,
propList: [’*’]
}
}
}

6. 引入flexible

import 'amfe-flexible'

end…

用REM解决多屏适配相关推荐

flexible.js+rem解决pc端适配
第一步:新建 flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px.(设计稿是1920px的) (function flexible(window, ...
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题参考文章: (1)移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题 (2)https://ww ...
Android屏幕适配之解决白屏启动的正确姿势
文章目录 APP启动页的需求 APP启动页的需求的尝试定义正确的Theme 定义背景图解决白屏启动的正确姿势参考Andoid屏幕适配终极手段(小编用过最得劲的dp适配)[https://www. ...
移动端高清、多屏适配方案
2019独角兽企业重金招聘Python工程师标准>>> 背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件 ...
移动端开发高清效果和多屏适配
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
记公司项目中数字大屏适配4K大屏的问题
记公司项目中数字大屏适配4K大屏的问题在接手的时候,前端页面已经开发完成,div高度与宽度是百分比,所以适配问题不用考虑宽高问题,但字体边距等没有统一单位,要求适配4k屏首先4k屏的宽高是3840 ...
前端大屏适配几种方案
记录一下前端大屏的几种适配方案. 我们是1920*1080的设计稿. 文章目录一.方案一:rem+font-size 1.查看适配情况 1.1 1920*1080情况下 1.2 3840*2160( ...
android 挖孔屏适配_使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...

用REM解决多屏适配

1. 作用

2. 原因

3. 解决

4. 安装包

5. 配置 postcss

6. 引入flexible

用REM解决多屏适配相关推荐

最新文章

热门文章