vue3.0中使用postcss-pxtorem

postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。

1.安装依赖

2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件)

操作到这里移动端自动适配了吗,当然不能,目前只是将px单位转换成rem,移动端适配还差最后一步,初接触rem理解起来有点懵,后来发现了一个好理解的方法,下面来分享一下。

现在我们作一个实验,你可以新建一个网页,并写入如下代码:

然后给html一个基本的样式:

上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16px。
我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px,那么换成rem单位,直接除以16就好。

明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案。src目录下,新建 libs/rem.js 输入如下代码

在main.js中引入rem.js

最后刷新页面看下,就会发现原本用px的单位已经自动换算成了rem;

未经允许不得转载:一点博客-青梅煮码-共享博客 » vue3.0中使用postcss-pxtorem
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏