没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
vue做移动端适配最佳解决方案做移动端适配最佳解决方案(亲测有效亲测有效)
主要介绍了vue做移动端适配最佳解决方案(亲测有效),小编觉得挺不错的,现在分享给大家,也给大家做个参
考。一起跟随小编过来看看吧
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',
资源评论
weixin_38503233
- 粉丝: 9
- 资源: 918
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 模块化多电平变流器MMC VSG控制(同步发电机控制)MATLAB–Simulink仿真模型 5电平三相MMC,采用VSG控制
- 硬件开发是一个广泛的领域,涵盖了从电路设计到嵌入式系统编程等多个方面 以下是一些关于硬件开发的资源,包括书籍、在线课程、工具软总
- matlab simulink仿真,光伏+燃料电池+蓄电池单相并网控制,光伏采用mppt控制,燃料电池与蓄电池经过DC DC变器
- 基于Arduino 的单相锁相 pll环程序
- 毕设之java开源订销管理系统
- ②基于分布式驱动电动汽车的路面附着系数估计,分别采用无迹卡尔曼滤波和容积卡尔曼滤波对电动汽车四个车轮的路面附着系数进行估计 本
- 职工工资管理系统.cpp
- 数字信号处理-音效处理.zip
- 西南科技大学汇编语言学习资料代码
- unity 内置浏览器(webview)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功