Vite中使用flexable和postcss-pxtorem进行移动端适配
2021/11/15 23:14:42
本文主要是介绍Vite中使用flexable和postcss-pxtorem进行移动端适配,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
如果使用Vue进行移动端页面的开发,需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable
和postcss-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(414736)中,同样是9.333rem
,这个元素的宽度被计算为9.333*41.4
:
这样,我们就可以按照设计稿给出的像素尺寸进行开发,而在不同的移动设备上进行适配了。
参考资料:
- https://github.com/amfe/lib-flexible
- https://www.npmjs.com/package/postcss-pxtorem
- https://segmentfault.com/a/1190000021045487
- https://juejin.cn/post/7012946831877341191
- https://blog.csdn.net/weixin_45982090/article/details/103469968
这篇关于Vite中使用flexable和postcss-pxtorem进行移动端适配的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南
- 2024-12-05TailwindCSS入门指南:轻松上手实用教程
- 2024-12-05TailwindCss入门指南:轻松上手实用技巧
- 2024-12-04Tailwind.css入门:简洁高效的设计利器
- 2024-12-03Tailwind.css学习:从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南:快速上手实用教程