13518219792
这篇文章主要为大家展示了如何实现vue cli3适配所有端方案，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
创新互联服务项目包括日照网站建设、日照网站制作、日照网页制作以及日照网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，日照网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到日照省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
应用场景
页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。
postcss-px2rem
yarn add postcss-px2rem
postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
css: {},
postcss: {
plugins: [
//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
//假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
require('postcss-px2rem')({
remUnit: 75
})
]
}
},
}flexible.js
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比
所以，在我们的html的header中，就不要之前配置的viewport的meta标签了
这种标签flexble会自动帮我们加上。
下面附上修改完后的flexble脚本代码：
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
dpr = isMobileDevice ? dpr : 1;
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
let width = docEl.clientWidth
// 下面5行为自己加的代码，pc端页面不转rem
let remUnitConfig = 75
let viewWidthMax = remUnitConfig * 10
if (width / dpr > viewWidthMax) {
width = viewWidthMax * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))最后需要在index.html中引入脚本：
flexble.js要和index.html文件同级
最后在head添加js标签，引入它：
自此，项目就配置完了。
以上就是关于如何实现vue cli3适配所有端方案的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。
