最近做一个移动端的项目,需要做到移动端适配。
曾经做过以下几种适配方案,但都不理想:
- 直接设置根元素字号,再用rem作单位。
- 使用淘宝flexible.js。
- 判断设备大小,再设置根元素字号大小,用rem作单位。
以上三种方案原理,是利用rem以根元素(html)字体大小进行计算。随着浏览器对vw单位的支持,使用vm作单位更适合。
本文旨在讲述如何使用vm做适配。
1.直接vm设置根元素字体大小
众所周知视口宽度为100vw,假设设计图为750px,那么1px应该对应多少vw呢?
我们来列个公式:
通过计算可得出:x= 0.13333333…
再使用rem作单位,设置 100px为1rem,只要设置根元素的字体大小为13.33vw。
html{
font-size:13.33vw;
}
但是这个方法存在缺陷,要设置1px时,必须使用px为单位。或者在rem转换时,可能出现问题。
2.利用webpack插件,将px转为vw
在css看用px作单位,在文件编译时,PostCSS插件将px单位转换成对应的vw单位大小。
以vue cli 3为例,先下载PostCSS插件。
- postcss-aspect-ratio-mini
- postcss-px-to-viewport
- postcss-write-svg
- postcss-cssnext
- cssnano
- postcss-viewport-units
使用npm安装
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save
在vue项目根目录下,找到 postcss.config.js
文件,修改配置:
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
// viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
// selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
};
示例中配置的是750px的设计图,如果设计图是其他尺寸,需要修改成其他尺寸。
css示例:
img{
width:100px;
height:100px;
}