Vue-cli 3.x 中实现页面等比缩放(postcss-px2rem)

Posted 2023-05-03

参考技术A

前端的童鞋们可能会遇到这样一个问题，UI设计师给出了一套设计图，我们需要自适应各种屏幕，且各个元素的大小和字体大小也随之缩放。

看到这个需求，本人首先会想到之前的思路是媒体查询，检测不同范围的屏幕宽度，写不同的样式来改变排版，以适应pc、ipad和移动端等。

假设屏幕大于999px都属于pc端，pc 分为大屏超大屏，我们需要响应大屏到超大屏之间的适应，举个栗子：
例如：媒体查询 （屏幕999~1200 div.title 都是 200px 宽，1200~1440。。。）
也就是说某个区间内，div.title 的宽度是不变的，当然你要设成百分比也不是可变的，那字体是否也可变呢？想要实时响应字体大小和元素大小又该如何解决呢?

这里我们可以使用一个插件，可以很轻松的解决掉这个实时响应等比缩放的问题： px2rem 插件。

安装

配置

需要结合 rem.js 配置

到这里配置完成啦，看下效果

配置前

配置后

哇哦，是不是很简单，是不是很神奇，小伙伴们赶快试试吧 ~~
点赞 ~~ 转发 ~~

还有两款插件，分别为：
postcss-plugin-px2rem 和 postcss-pxtorem

postcss-plugin-px2rem 在 vue.confing 中常用配置为：

postcss-pxtorem 在 vue.confing 中常用配置为：

一个ImageView等比例缩放

Imageview宽全屏，高度如何等比例缩放呀

android:scaleType="centerInside"
按比例缩小图片的size居中显示，使得图片长(宽)等于或小于View的长(宽)
android:scaleType="centerCrop"
按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽) 参考技术A android:scaleType="centerInside"
按比例缩小图片的size居中显示，使得图片长(宽)等于或小于View的长(宽)
android:scaleType="centerCrop"
按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽)本回答被提问者采纳