vue做移动端适配最佳解决方案,亲测有效
vue做移动端适配最佳解决方案,亲测有效
转载今天也在写bug 发布于2018-05-25 17:20:34 阅读数 26760 收藏
最近在做商城的项目,发现有赞的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',
-
options: {
-
remUnit: 37.5
-
}
-
}
-
function generateLoaders (loader, loaderOptions) {
-
const loaders = [cssLoader, px2remLoader]
-
if (loader) {
-
loaders.push({
-
loader: loader + '-loader',
-
options: Object.assign({}, loaderOptions, {
-
sourceMap: options.sourceMap
-
})
-
})
-
}
- 重启项目,会发现自己设置的px被转为rem 了
- 但是有一定的局限性
-
以上实现转换适用于:
(1)组件中编写的<style></style>下的css
(2)从index.js或者main.js中import ‘../../static/css/reset.css’引入css
(3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css
另外的情况不适用:
(1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)
(2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>
(3)元素内部样式:style=”height: 417px; width: 550px;”
另外我要补充的是:在做移动端适配的时候我们不建议给字体也设置rem的单位,针对这种情况,我为字体适配的解决方案是使用媒体查询,文件以组件<style></style>中@import “../../static/css/reset.css形式引入,可完美解决移动端适配问题
相关文章
- Vue Comparison with Other Frameworks
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue】通过编程式路由跳转、参数传递及重复异常错误的解决方案
- Vue - 项目(未编译)上传到 Gitee / GitHub 时不上传 dist 文件夹/看不到(解决方案)
- vue 父组件与子组件的三生三世
- (26)打鸡儿教你Vue.js
- vue从入门到进阶:指令与事件(二)
- 关于template标签用法总结(含vue中的用法总结)
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- vue实战入门后台篇七:springboot+mybatis实现网站后台-各实体界面接口对接
- vue-router4之命名路由与命名视图
- 图片-滑动-解锁-组件-vue-canvas
- vue里ref ($refs)用法
- Vue之mitt事务总线使用方法
- Vue CLI 4.0 关于 webpack 基本配置范例
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- Vue学习第13天——vue中使用自定义插件
- Vue项目安装core-js报错解决方案
- andt vue select 模糊搜索
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想