当前位置:   article > 正文

cli3 px转rem适配移动端_如何在vue-cli3.x中实现rem移动端适配

lib-flexible cli 3.x

vue-cli3中实现rem移动端适配的有效方法:lib-flexible + postcss-pxtorem。

一、实现思路:

Rem 适配

lib-flexible  用于设置rem基准值

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

二、安装lib-flexible和postcss-pxtorem

1. 安装命令

npm install lib-flexible --save 或者 yarn add lib-flexible --save

npm install postcss-pxtorem --save-dev 或者 yarn add postcss-pxtorem --save-dev

postcss-pxtorem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值。

2. 在main.js中引入lib-flexible

import 'lib-flexible'

3. 在根目录的.postcssrc.js文件中进行配置

module.exports = {

plugins: {

autoprefixer: {

browsers: ['Android >= 4.0', 'iOS >= 7']

},

'postcss-pxtorem': {

rootValue: 37.5, // 换算的基数(设计图750的根字体为75,我这里设置成75的一半37.5,至于原因请看下面的注意事项)

propList: ['*'], // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部

minPixelValue: 2 // 小于或等于`2px`不转换为视窗单位

}

}

}

三、使用

.demo-class {

width: 300px;

height: 200px;

background: skyblue;

}

然后我们在浏览器里定位到这个元素,既可以看到已经从px转换成了rem。

四、如何忽略单个属性

npm的官网查的postcss-pxtorem这个包的配置:

A message about ignoring properties

Currently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.

// `px` is converted to `rem`

.convert {

font-size: 16px; // converted to 1rem

}

// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers

.ignore {

border: 1Px solid; // ignored

border-width: 2PX; // ignored

}

大致意思就是说:目前,忽略单个属性的最简单的方法是在像素单元声明中使用大写。

我尝试了一下,把px改成Px、PX就行啦,

五、注意事项

rootValue这个配置项的数值设置一般我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把rootValue设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。

至于这里我为什么用的是37.5呢?是因为项目中会引用vant、mint-ui这样的第三方UI框架,因为第三方框架没有兼容rem,单位使用px,将rootValue的值设置为设计图宽度75的一半,即可以1:1还原vant、mint-ui的组件,否则会样式会有变化,例如按钮会变小。

我们将rootValue设置成37.5后,我们在写样式时,也要将值都改为设计图的一半。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/874389
推荐阅读
相关标签
  

闽ICP备14008679号