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 相关文章推荐
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue源码nextTick使用及原理解析
Aug 13 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守护进程类
2015/12/30 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
python self,cls,decorator的理解
2009/07/13 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python二元表达式用法
2019/12/04 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Python制作表白爱心合集
2022/01/22 Python