基于vue-cli配置lib-flexible + rem实现移动端自适应

安装flexible

npm install lib-flexible --save

引入flexible

在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

安装px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

关于importLoaders：如若有疑问，请参考webpack深入与实战4-4

2017.12.8更新说明：是否需要配置importLoaders，可参考最底部的说明。

px2rem 用法

安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。

直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个

在px后面添加/*no*/，不会转化px，会原样输出。 --- 一般border需用这个

在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

示例代码

编译前（自己写的代码）

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

编译后（打包后的代码）

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

重启项目，就可以愉快的用设计稿上的px了。

注意：坑

不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加！

更新：对外部引入css，px2rem能不能转换rem问题

2017.12.8更新：在实际运用中发现对于外部引入的css文件，有时候px2rem能正常转换，有时候又不能转换，到底是什么原因呢？试验了三种不同的css引入情况，发现第一种能正常转换，二三不能正常转换，至于原因，由于才疏学浅，还是不懂，求大神解答三种引入方式的区别。

如果明白了这些方法，就没必要再配置cssLoader的importLoaders了，因为下面的方法更容易控制外部引入的css是否需要转rem，而更改importLoaders就控制不了了，它会强制转换。

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

总结

以上所述是小编给大家介绍的基于vue-cli配置lib-flexible + rem实现移动端自适应，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • 详解基于vue-cli配置移动端自适应
赞 (0)

相关推荐

  • 详解基于vue-cli配置移动端自适应

    之前写过一篇关于移动端屏幕适配:移动端屏幕适配的解决,今天来聊一聊基于vue-cli配置的移动端屏幕适配问题. 配方还是一样:手淘的 lib-flexible+ rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible // main.js import 'lib-flexible' 添加 meta 标签 在项目根

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • 基于vue-cli配置lib-flexible + rem实现移动端自适应

    基于vue-cli配置lib-flexible + rem实现移动端自适应

    安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 bu

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • vue/cli 配置动态代理无需重启服务的操作方法

    vue/cli 配置动态代理无需重启服务的操作方法

    vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板. vue/cli 配置动态代理,无需重启服务 devServe = http://localhost:3000; prodServe = http://localhost:4000; 1. 在vue.config.js文件中,配置代理服务 使用vue/cli@5创建的项目,默认会创建vue.config.js文件,如果项目中没有此文件,那

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

  • 基于VUE实现判断设备是PC还是移动端

    实际开发工作中会经常遇到一个需求,就是判断当前登录网页的设备是PC还是移动,要求PC端和移动端显示的是不同的网页内容. 那么我们就需要对当前登录设备进行判断. 使用 navigator.userAgent 字符串检测 我是在PC端开发完接到要做移动端的需求,而且移动端只有一个页面,我就统一放在了一个文件夹内. 首先在 app.vue 文件内,判断当前设备是pc端还是移动端. methods: { // 添加判断方法 isMobile() { let flag = navigator.userAg

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

随机推荐