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身份证验证超强脚本
Oct 26 Javascript
用户注册常用javascript代码
Aug 29 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
详解JS函数重载
2014/12/04 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
python插入排序算法实例分析
2015/07/03 Python
详解Python中heapq模块的用法
2016/06/28 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Django REST framework内置路由用法
2019/07/26 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
学校安全检查制度
2014/01/27 职场文书
个人工作表现评价材料
2014/09/21 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python