ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vite中使用flexable和postcss-pxtorem进行移动端适配

2021-11-15 22:33:28  阅读:1002  来源: 互联网

标签:转换 amfe 适配 flexable Vite rem postcss pxtorem


如果使用Vue进行移动端页面的开发,需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexablepostcss-pxtorem这两个插件来帮助进行适配。

amfe-flexable

amfe-flexable是阿里发布的一套可伸缩适配方案。它能根据设备的宽高来设置页面body元素的字体大小,将1rem设置为设备宽度/10以及在页面大小转换时可以重新计算这些数值。

具体可见github连接:https://github.com/amfe/lib-flexible

postcss-pxtorem

postcss-pxtorem是postcss的一个插件,可以将对应的像素单位转换为rem。在vite中可以直接对其进行配置,因为vite已经集成了postcss。

其中最重要的配置属性为:

  • rootValue:根元素的值,即1rem对应的像素值大小。一般设置为设计稿尺寸/10

以及一些其他属性:

  • propList:需要进行转换的css属性的值,可以使用通配符。如:*意思是将全部属性单位都进行转换;["*position*"]会匹配到background-position-y
  • selectorBlackList:不进行单位转换的选择器。如设置为字符串body,则所有含有body字符串的选择器都不会被该插件进行转换;若设置为[/^body$/],则body会被匹配到而不是.body
  • exclude:不需要进行单位转换的文件
  • mediaQuery:是否允许像素在媒体查询中进行转换

在Vite中进行使用

首先需要安装:

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

main.ts中引入:

import 'amfe-flexible'

可以看到,html元素的字体大小被设置为**设备宽度/10,**证明amfe-flexible配置成功:
在这里插入图片描述
vite.config.js中配置postcss-pxtorem

import postCssPxToRem from "postcss-pxtorem"
...

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, // 1rem的大小
          propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
        })
      ]
    }
  },
...
})

这里本来设置el-input元素的宽度为350px,但是使用了postcss-pxtorem之后会将px转换为rem,参照的基准就是rootValue,所以此处得到350/37.5=9.333…rem
在这里插入图片描述
由于rootValue是固定的,所以元素计算出来的rem单位也是一个固定的值(如上例的9.33)。但是在amfe-flexable会计算不同宽高设备的元素的根字体大小,所以每次都能计算得到一个适配的宽高。如上例中,9.333rem在iPhone X(375812)中会被计算为9.333*37.5
在这里插入图片描述
但是在iPhone 8 Plus(414
736)中,同样是9.333rem,这个元素的宽度被计算为9.333*41.4
在这里插入图片描述
这样,我们就可以按照设计稿给出的像素尺寸进行开发,而在不同的移动设备上进行适配了。


参考资料:

标签:转换,amfe,适配,flexable,Vite,rem,postcss,pxtorem
来源: https://blog.csdn.net/weixin_43554584/article/details/121345084

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有