1.下载lib-flexible

npm i lib-flexible --save

2.引入lib-flexible

在main.jsin引入

import 'lib-flexible/flexible'

3.设置meta标签

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; viewport-fit=cover"name="viewport" />

4.下载postcss-pxtorem(单位转化为 rem)

npm install postcss-pxtorem -D

5.在项目根目录中创建 postcss.config.js 文件

module.exports = {plugins: {"postcss-pxtorem": {// 设计稿 375:37.5// 设计稿：750:75// Vant 是基于 375rootValue: 37.5,propList: ["*"]}}
}

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

vue移动端适配方案
1.适配方案在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合)的方式. 首先介绍一下amfe-flexible amfe-flexible ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
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 ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...

vue 移动端适配方案

1.下载lib-flexible

2.引入lib-flexible

3.设置meta标签

4.下载postcss-pxtorem(单位转化为 rem)

5.在项目根目录中创建 postcss.config.js 文件

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

最新文章

热门文章