前言
前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位
方案1. 使用PostCss-px-to-viewport插件
step1. vue安装postcss-px-to-viewport插件。
使用npm安装
$ npm install postcss-px-to-viewport --save-dev
或者使用yarn进行安装
$ yarn add -D postcss-px-to-viewport
step2. 配置适配插件的参数
{
unitToConvert: 'px', //需要转换的单位
viewportWidth: 750, //设计稿的宽度
unitPrecision: 5, //单位转换后保留的精度
propList: ['*'], //能转化为vw的属性列表，默认'*'
viewportUnit: 'vw', //转换后的视口单位
fontViewportUnit: 'vw', //字体使用的视口单位
selectorBlackList: [], //忽略的css选择器
minPixelValue: 1, //最小的转换数值
mediaQuery: false, //是否开启媒体查询
replace: true, //是否直接更换属性值，而不添加备用属性
exclude: [], //忽略某些文件夹下的文件或特定文件
landscape: false,
landscapeUnit: 'vw', //横屏时使用的单位
landscapeWidth: 750 //横屏时使用的视口宽度
}
使用PostCss配置文件时，在<u>postcss.config.js</u>添加如下配置：
module.exports = {
plugins: {
...
'postcss-px-to-viewport': {
"viewportWidth": 750,
"minPixelValue": 1,
"mediaQuery": false,
"selectorBlackList": ["van", "el"],
"landscape": true,
"landscapeUnit": "vw",
"landscapeWidth": 2048
}
}}
或者在<u>package.json</u>中，添加以下配置：
"postcss": {
"plugins": {
"autoprefixer": { },
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1,
"mediaQuery": false,
"selectorBlackList": ["van", "el"],
"landscape": true,
"landscapeUnit": "vw",
"landscapeWidth": 2048
}
}
}
说明下几个重要参数的使用：
- viewportWidth 必填属性，根据UI提供的设计稿宽度定义
- minPixelValue 必填属性，一般为1
- selectorBlackList 选填属性，通常情况下，可以忽略一些第三方的UI样式，否则viewport将改变第三方UI样式库的单位值
- mediaQuery 选填属性，是否开启媒体查询
- landscape 选填属性，是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
- landscapeWidth 选填属性，横屏时使用的视口宽度
适配存在的问题点：
-
如果产品的需求是PC端查看移动端网页时，需要居中显示。
由于postcss-px-to-viewport的原理是，根据设计稿，把所有试图单位的宽高设置成vw单位，也就是一个比例，那么所有的设备传真实像素进来的时候，会得出真实的px值。
所以我们PC全屏时，看到的效果是移动端网页充满PC的屏幕宽度，这时候，landscape就可以帮我们解决这个问题了。"landscape": true, "landscapeUnit": "vw", "landscapeWidth": 2048landscape参数的作用（上面有解释）。
-
如果我们引用了第三方UI库，例如element-ui、vant等热门ui被压缩
selectorBlackList帮我们处理了这个问题。
只需要将第三方ui的前缀加入到selectorBlackList数组中，例如"selectorBlackList": ["van", "el"]那么postcss-px-to-viewport自动排除这些带前缀的组件
方案2. libflexible和postCss-px2Rem插件配合使用
step1.引入lib-fixible
npm install lib-flexible --save-dev
注：执行指令后在package.json的devDependencies分支可以看到相应的版本，
2. 在main.js中导入lib-fixible.
import 'lib-flexible'
如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
step2. 引入postcss-px2remnpm
install postcss-px2rem --save-dev
注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。
在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
// 以设计稿750为例， 750 / 10 = 75
remUnit: 75
}),
]
}
}
}
};
因为postcss-px2rem是基于px2rem编写的，所以同样也支持px2rem后缀注解方式。
在样式后面添加/no/,即不会将px转成rem。
在样式后面添加/px/,会更加dpr生成三套带px代码,以data-dpr=2为基准
注意：备注前面样式一定要以分号结尾，不然无法被识别。
详情使用查阅px2rem官方说明
埋坑提示:
集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...>，
查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把<metaname="viewport" ...>去除.
