vue实现移动端适配方案

vue实现移动端适配步骤如下:

先安装amfe-flexible和postcss-pxtorem：

npm install amfe-flexible --save
npm install postcss-pxtorem --save

在main.js导入amfe-flexible

import 'amfe-flexible';

配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：
在vue.config.js配置如下：

     module.exports = {//...其他配置css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({rootValue: 37.5,propList: ['*']})]},sass: {// 配置scss文件全局变量,没有分号会报错data: `@import "@ui/common.scss";` // 旧版sass-loader写法(8.0以下)// prependData: `@import "@ui/common.scss";` // 新版scss-loader(8.0及以上)}}},}

在.postcssrc.js或postcss.config.js中配置如下：

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

rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；
propList是设置需要转换的属性，这边*为所有都进行转换。

测试结果：

css中设置某类宽度为375px：

 .content{width:375px;}

运行后在浏览器可以发现已经转化为10rem,即375/设置的rootValue：

以上情况则说明postcss-pxtorem配置成功

html的字体大小跟随设备宽度进行改变，body跟随设备的dpr进行改变，这是amfe-flexible的实现，即说明配置成功。

说明，安装过程中可能会遇到以下报错：

1.安装配置后，发现rem并没有生效，解决办法：使用vue.config.js去配置，不要用postcss.config.js

2.抛错[object Object] is not a PostCSS plugin。报错原因：postcss-pxtorem版本太高，更改版本为5.1.1。npm install postcss-pxtorem@5.1.1

vue实现移动端适配方案相关推荐

Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
CSS移动端适配方案
文章目录移动端适配移动端适配介绍视口的介绍布局视口和视觉视口理想视口移动端适配方案 rem适配方案基本介绍单位换算 vw适配方案移动端适配移动端适配介绍移动互联网的快速发展,让人 ...

vue实现移动端适配方案

vue实现移动端适配方案相关推荐

最新文章

热门文章