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代码
Oct 09 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 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之第四天
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PDO实现学生管理系统
2020/03/21 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
Python显示进度条的方法
2014/09/20 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Django日志及中间件模块应用案例
2020/09/10 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
造型师求职自荐信
2013/09/27 职场文书
经典大学生求职信范文
2014/01/06 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
3分钟演讲稿
2014/04/30 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
2014年组织部工作总结
2014/11/14 职场文书
家长对孩子的寄语
2015/02/26 职场文书
小学大队长竞选稿
2015/11/20 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis