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 面向对象之命名空间
May 04 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
AngularJS实现多级下拉框
Mar 25 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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP通用检测函数集合
2011/02/08 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python及PyCharm下载与安装教程
2017/11/18 Python
django解决跨域请求的问题
2018/11/11 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python实现手机销售管理系统
2019/03/19 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
文明风采获奖感言
2014/02/18 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
公司地址变更通知
2015/04/25 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
党员反邪教心得体会
2016/01/15 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
opencv 分类白天与夜景视频的方法
2021/06/05 Python
浅谈Python协程asyncio
2021/06/20 Python