浅谈vue 移动端完美适配方案
前言：根据最近做的一个医疗手机端项目总结在移动端，vue怎么在不同屏幕上做根据不同屏幕大小适配
1、适配方案
在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合）的方式。
首先介绍一下amfe-flexible
amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。
然后就是这个库 postcss-pxtorem
postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。
2、如何使用和配置？
1、安装 amfe-flexible 和 postcss-pxtorem
npm install amfe-flexible --save npm install postcss-pxtorem --save
2、安装完成后，肯定需要引入才能使用
我们需要在main.js中引入才能使用
import 'amfe-flexible';
这样引入就OK了
3、然后就是postcss-pxtorem 配置步骤
配置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: ['*']
})
]
}
}
},
}
在.postcssrc.js或postcss.config.js中配置如下：
module.exports = {
"plugins": {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
注意点：
1、rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；
2、propList是设置需要转换的属性，这边*为所有都进行转换。
通过以上配置我们就可以在项目使用了。
比如项目中我们这样写：
.login-form {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
.title {
position: absolute;
top: -50px;
font-size: 24px;
color: #fff;
left: 0;
right: 0;
text-align: center;
}
}
那我们代码的产出就是下面这样的 ，插件实惠帮我们自动转换单位。
login-wraper .login-form {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: .53333rem; // 注意这个就是转换后的单位
box-sizing: border-box;
border-radius: .26667rem; // 注意这个就是转换后的单位
}
到此这篇关于vue 移动端完美适配方案的文章就介绍到这了,更多相关vue 移动端完美适配方案内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue3实现跑马灯效果，可以更换颜色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了Vue.js实现价格计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue+echarts绘制折线图、柱状图和扇形图教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在本文中，我们学习了如何使用 Intersection Observer API 和 defineAsyncComponent 函数在 Vue 组件可见时对其进行懒加载，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友一起看看吧2023-09-09
这篇文章主要介绍了webpack+vue.js构建前端工程化的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了Vue 监听元素前后变化值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue全局自定义指令和局部自定义指令的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
在现代前端开发中,项目通常需要在不同的环境中运行,例如开发环境、测试环境和生产环境,每个环境可能需要不同的配置,通过使用 .env 文件,可以方便地管理这些环境变量,避免硬编码配置,本文给大家介绍了Vue3项目中env文件的配置指南,需要的朋友可以参考下2025-03-03
今天小编就为大家分享一篇vue.js的状态管理vuex中store的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue Router 是 Vue.js 官方的路由管理器。这篇文章主要介绍了详解vue-router传参的两种方式,需要的朋友可以参考下2018-09-09
最新评论