vue做移动端适配最佳解决方案(亲测有效)


Posted in Javascript onSeptember 04, 2018

vw 解决方案

1. 安装并配置PostCss插件

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

2. 对 PostCss 进行配置

找到在根目录中的.postcssrc.js,对PostCSS插件进行配置

module.exports = {
 "plugins": {
  "postcss-import": {},
  "postcss-url": {},
  // to edit target browsers: use "browserslist" field in package.json
  "postcss-write-svg": {
   uft8: false
  },
  "postcss-cssnext": {},
  "postcss-px-to-viewport": {
   viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
   viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
   unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
   viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
   selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
   minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
   mediaQuery: false // 允许在媒体查询中转换`px`
  },
  "postcss-viewport-units": {},
  "cssnano": {
   preset: "advanced",
   autoprefixer: false, // 和cssnext同样具有autoprefixer,保留一个
   "postcss-zindex": false
  }
 }
}

3. 引入viewport-units-buggyfill解决兼容问题

在 index.html 中引入js

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script>
 window.onload = function () { 
  window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
 }
</script>

最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案,亲测有效哦

它的原理是借助px2rem 插件方便的将px单位转为了rem

具体步骤:

安装

npm install px2rem-loader lib-flexible --save

在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

在build下的 utils.js中,找到generateLoaders 方法,添加以下代码

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
  remUnit: 37.5
  }
}
 
function generateLoaders (loader, loaderOptions) {
  const loaders = [cssLoader, px2remLoader]
  if (loader) {
    loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
    sourceMap: options.sourceMap
    })
  })
}

重启项目,会发现自己设置的px被转为rem 了

但是有一定的局限性

以上实现转换适用于:

(1)组件中编写的<style></style>下的css

(2)从index.js或者main.js中import ‘../../static/css/reset.css'引入css

(3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

另外的情况不适用:

(1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

(2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

(3)元素内部样式:style=”height: 417px; width: 550px;”

另外我要补充的是:在做移动端适配的时候我们不建议给字体也设置rem的单位,针对这种情况,我为字体适配的解决方案是使用媒体查询,文件以组件<style></style>中@import “../../static/css/reset.css形式引入,可完美解决移动端适配问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js数组依据下标删除元素
Apr 14 Javascript
js字符串操作方法实例分析
May 06 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
基于element-ui的rules中正则表达式
Sep 04 #Javascript
微信小程序的部署方法步骤
Sep 04 #Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 #Javascript
Element UI 自定义正则表达式验证方法
Sep 04 #Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 #Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 #Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 #Javascript
You might like
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php 魔术函数使用说明
2010/02/21 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
如何用php获取文件名后缀
2013/06/09 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
document.createElement()用法
2013/03/13 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python中的pass语句使用方法讲解
2015/05/14 Python
python自动裁剪图像代码分享
2017/11/25 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
车辆安全检查制度
2014/01/12 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
大学学生会竞选稿
2015/11/19 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书