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 相关文章推荐
js验证表单大全
Nov 25 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
Dedecms常用函数解析
2008/02/01 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
javascript基本语法
2016/05/31 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python使用sorted排序的方法小结
2017/07/28 Python
python 实现A*算法的示例代码
2018/08/13 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
宿舍违规用电检讨书
2014/02/16 职场文书
公司请假条格式
2014/04/11 职场文书
感恩教育月活动总结
2014/07/07 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers