VUE移动端及PC端适配方案

您所在的位置：网站首页 › 适配移动端和pc端 › VUE移动端及PC端适配方案

VUE移动端及PC端适配方案

2023-10-21 06:44| 来源: 网络整理| 查看: 265

前言

前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用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配置文件时，在postcss.config.js添加如下配置：

module.exports = { plugins: { ... 'postcss-px-to-viewport': { "viewportWidth": 750, "minPixelValue": 1, "mediaQuery": false, "selectorBlackList": ["van", "el"], "landscape": true, "landscapeUnit": "vw", "landscapeWidth": 2048 } }}

或者在package.json中，添加以下配置：

"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": 2048

landscape参数的作用（上面有解释）。

如果我们引用了第三方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，如下：

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头中自己设置了，

查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把去除.

【本文地址】

VUE移动端及PC端适配方案

VUE移动端及PC端适配方案

今日新闻

推荐新闻