您好,登录后才能下订单哦!
这篇文章主要为大家展示了如何实现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标签了
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
这种标签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标签,引入它:
<script src="flexible.js" type="text/javascript" charset="utf-8"></script>
自此,项目就配置完了。
以上就是关于如何实现vue cli3适配所有端方案的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。