vue中实现一个项目里兼容移动端和pc端
作者:swx980
一个项目里兼容移动端和pc端
话不多说,上代码
先来看一下我的文件
路由文件 index.js:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode:"history", routes: [ // pc端 { path: '/', name: 'pc/home', component: ()=>import("@/components/pc/home"), }, // 手机端 { path: '/mobile/home', name: 'mobile/home', component: ()=>import("@/components/mobile/home"), }, ] })
在app.vue中
mounted(){ if (this._isMobile()) { // 手机端 this.$router.replace("/mobile/home"); } else { // pc端 this.$router.replace("/"); } }, methods:{ _isMobile() { let flag = navigator.userAgent.match( /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i ); return flag; }, }
vue移动端与PC端适配方案viewport+postcss-px-to-viewport
GitHub文档地址:https://github.com/evrone/postcss-px-to-viewport
GitHub - evrone/postcss-px-to-viewport: A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
优点
- 不需要换算及转换系数
- 某些属性不需要转换为REM、VW等
- 可以全部使用px单位
lib-flexible 作者推荐,方便好用
什么是viewport
viewport翻译成中文的意思大致是视图、视窗。在移动端设备中,整块显示屏就相当于视图、视窗。但这种说法也并不完全正确。因为在移动端设备中,浏览器视图并不是整个屏幕。因此viewport又被分为了3种 layout viewport(布局视口)、visual viewport(视觉视口)、ideal viewport(理想视口)
为了能够适配到pc端开发页面中,大部分浏览器把viewport的宽度设为了980px 这个浏览器默认设置的视图被称为 layout viewport。我们可以使用document.documentElement.clientWidth 来获取。
由于 layout viewport的宽度是远大于浏览器宽度的,因此我们需要一个新的viewport来代表浏览器的可视区域宽度,这个视图则被称为visual viewport我们可以使用window.innerWidth来获取。
现在我们已经有两个viewport了,layout viewport 和 visual viewport。但浏览器觉得还不够,因为现在越来越多的网站都会为移动设备进行单独的设计,所以必须还要有一个能完美适配移动设备的ideal viewport。
ideal viewport 并没有一个固定的尺寸,不同的设备拥有不同的 ideal viewport。比如iphone5的 ideal viewport是 320px 而 iphone6s的 ideal viewport却是 375px
使用方法
- 下载插件postcss-px-to-viewport
- 根目录下创建配置文件postcss.config.js
- 添加所需要的配置项
//引入 postcss-px-to-viewport npm install postcss-px-to-viewport --save-dev
//postcss.config.js module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: "px", // 要转化的单位 viewportWidth: 1920, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度,即小数点位数 propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换 viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名, minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false replace: true, // 是否转换后直接更换属性值 exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配 include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1920 // 横屏时使用的视口宽度 } } }
需要注意的配置:
propList
: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如propList: ["*","!letter-spacing"],这表示:所有css属性的属性的单位都进行转化,除了letter-spacing的selectorBlackList
:转换的黑名单,在黑名单里面的我们可以写入字符串,只要类名包含有这个字符串,就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位,都不会被转换
vant组件库兼容问题
vant组件库的设计稿是按照375px来开发的。因此在viewportWidth
为750px
时会出现转换问题。
// postcss.config.js const path = require('path'); module.exports = ({ webpack }) => { const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; //如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。拼接的原因是Windows和iOS系统的路径转义符不一样Windows是“/”,ios是“\” return { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { unitToConvert: "px", viewportWidth: viewWidth, unitPrecision: 6, propList: ["*"], viewportUnit: "vw", fontViewportUnit: "vw", selectorBlackList: [], minPixelValue: 1, mediaQuery: true, exclude: [], landscape: false } } } }
效果图:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。