时间:2021-05-26
应用场景
页面需要在pc端和移动端同时兼容,以前我的方案都是使用媒体查询来判断当前设备大小,然后写两套或者三套css代码来兼容他们,能达到目的,并且效果不错,但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本,稍作修改,基本可以满足我的需求。
postcss-px2rem
yarn add postcss-px2rempostcss-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适配所有端方案的实现的文章就介绍到这了,更多相关vue cli3适配所有端内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
我的host设置报错如下:解决办法:@Vue/Cli3在vue.config.js里加上.disableHostCheck(true)vue-cli在webpa
在开发项目的时候,我们一般都用vue-cli来避免繁琐的webpack配置和template配置。但是官方cli3现在并不支持搭建plugin开发的项目。还好,
问题现象项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10。browserslist的配置如下:[">1%","last2versions"
vue微信网页授权,基于vue-cli3.0+webpack4+vantui+sass+rem适配方案+axios,开发的微信授权方案。项目地址:vue-wec
Cli3工具中,配置路径别名最近用VueCli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,