vue移动端适配解决方案

手淘适配解决方案

阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。

当然，要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的rem单位。

下面我们进行依赖的安装

npm i amfe-flexible postcss-pxtorem --save-dev

安装完成后我们需要进行postcss插件相关的配置在根目录新建一个名为postcss-config.js的文件，如果项目中已包含改文件则无需新建。在文件中写入如下代码：

module.exports = {plugins: {'postcss-pxtorem': {rootValue: 37.5,propList: ['*','!border']}}
}

上面代码是在postcss中配置一个有关postcss-pxtorem的插件，其中rootValue的值表示要转换的倍数。当H5设计稿的width为375时，对应的rem就等于375/37.5 = 10rem当项目加载时。postcss会将插件postcss-pxtorem进行加载。postcss-px则负责将style中所有用px标记的样式转换成rem类型。propList这个配置则表示要将那些css样式进行匹配转换。其中*表示匹配所有的css !表示不需要匹配的

下面是postcss-pxtorem 其他的一些配置项

{ //rootValue(Number | Function) 表示根元素字体大小或根据参数返回根元素字体大小rootValue : 16,//类型为数字 允许 REM 单位增长到的十进制数字。unitPrecision : 5,//类型为数组 可以从 px 更改为 rem 的属性。propList : [ 'font' ,  'font-size' ,  'line-height' ,  'letter-spacing' ], //类型为数组 要忽略并保留为 px 的选择器 可以为正则表达式selectorBlackList : [ ],//类型为布尔值 替换包含 rems 的规则，而不是添加回退。replace : true,//类型为布尔值 允许在媒体查询中转换 px。mediaQuery : false,//类型为数字 设置要替换的最小像素值。minPixelValue : 0,//类型为字符串或正则表达式或函数 要忽略并保留为 px 的文件路径。exclude：/ node_modules / i
}

值得注意的是： postcss-pxtorem 可能会将UI组件库也进行转换，若出现该问题，我们应该忽略掉vant相关的css

在main.js引入相关的包
之前我们安装了vant组件库和一些辅助的工具包我们应该在main.js中引入

import 'amfe-flexible'
import Vue from 'vue'
//按需引入vant的一些组建
import {Toast,Dialog,Overlay} from 'vant'
import FastClick from 'fastClick'
FastClick.attach(document.body)
import Vconsole form 'vconsole'
if(process.env.NODE_ENV === 'development'){const vConsole = new Vconsole({defaultPlugin: ['system','network','element'],maxLogNumber:'1024',onReady:()=> console.log('i am fine')})
}
Vue.use(Toast).use(Dialog).use(Overlay).use(Vconsole)

至此，我能的移动端适配就做好了，只需安装设计稿的比例进行开发就可以了

vue移动端适配解决方案相关推荐

Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.
React移动端适配解决方案lib-flexible和postcss-px2rem、node.getIterator is not a function 报错使用postcss-pxtorem
文章目录 React移动端适配解决方案lib-flexible和postcss-px2rem 第一步第二步第三步第四步第五步问题分割线==================== 一.淘宝弹性布 ...
VUE pc端适配移动端H5
需要安装两个插件 postcss-pxtorem 和 lib-flexible 直接安装postcss-pxtorem插件,报错" Error: PostCSS plugin postcss ...
element 手机适配_解决vue移动端适配问题
1,先看看网上关于移动端适配讲解再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...
阿里手淘可伸缩布局方案amfe-flexible解决vue移动端适配问题
前言: 由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题.建议大家开始使用viewport来替代此方 ...
后台管理系统移动端适配解决方案
lib-flexible + postcss-pxtorem 1.安装 npm i lib-flexible npm i postcss-pxtorem 2.在main.js引入 // 移动端适配 i ...
pc端与移动端适配解决方案
一般网站实现pc端与移动端适配的需求,方案有两个: 1.一套页面,从设计时就考虑到跨设备适配,响应式的一步到位: 2.开发两套页面,根据设备尺寸加载加载不同的资源,目前已经不常见了: 一:响应式方案 ...
vue移动端适配方案
1.适配方案在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合)的方式. 首先介绍一下amfe-flexible amfe-flexible ...

vue移动端适配解决方案

手淘适配解决方案

vue移动端适配解决方案相关推荐

最新文章

热门文章