这篇文章主要介绍了vue cli3适配所有端方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
应用场景
页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大本文来源gaodai$ma#com搞$代*码*网(小，然后写两套或者三套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适配所有端方案的实现的文章就介绍到这了,更多相关vue cli3适配所有端内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是vue cli3适配所有端方案的实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue cli3适配所有端方案的实现
转载请注明原文链接：vue cli3适配所有端方案的实现
