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 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
基于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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JavaScript使用cookie
2007/02/02 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js导出txt示例代码
2014/01/14 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
在Django中创建第一个静态视图
2015/07/15 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python实现维吉尼亚加密法
2019/03/20 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
护理学毕业生自荐信
2013/10/02 职场文书
访谈节目策划方案
2014/05/15 职场文书
怎样写离婚协议书
2014/09/10 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
关于python类SortedList详解
2021/09/04 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python