关于vue中使用rem问题
1.下载lib-flexible
我使用的是vue-cli+webpack,所以是通过npm来安装的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.安装px2rem-loader
npm install px2rem-loader
4.配置px2rem-loader
在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,将下面代码加进cssLoaders方法中
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75
}
}
同时,在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader] if (options.usePostCSS) {
loaders.push(postcssLoader)
} if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
5、重启
当配置完之后,重启下服务,px会自动转化为rem了
npm run dev
6、注意事项
1、不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!
2、对css中文字样式增加/* px */后缀,会编译出适应不同dpr的字号
.text{
font-size: 28px; /* px */
}
// 会被编译成如下: [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
font-size: 14px;
} [data-dpr="2"] .text {
font-size: 28px;
} [data-dpr="3"] .text {
font-size: 42px;
}
3、对边框样式增加/* no */后缀,会保持原样
.box{
border: 1px solid #fff; /* no */
}
// 会被编译成如下:
.box{
border: 1px solid #fff;
}
关于vue中使用rem问题的更多相关文章
- vue 中使用rem布局
在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: fnResize(); window.onresize = function () { fnResize ...
- & vue项目中的rem适配
有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...
- vue px 转rem
来自:https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 删 每一个认真生活的人,都值得被认真对待 vue px转换为rem 前端开发中还原设 ...
- vue px转换为rem
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
随机推荐
- Python 金融数据分析 (一)—— 股票数据
1. tushare 库 tushare 的官网请见:TuShare -财经数据接口包,是国人自己开发的 Python 爬数据工具(所谓的爬,自然就是在线连网获取数据),囊括股票.期货.宏观经济.电影 ...
- DDD实战8_1 实现对领域中连接字符串的可配置
1.在webapi的配置文件中配置连接字符串节 2.在webapi的startup类中的Configure方法中 将工具类里面AppSetting的静态Section的值 对应上webapi的配置文件 ...
- C++使用Windows API CreateMutex函数多线程编程
C++中也可以使用Windows 系统中对应的API函数进行多线程编程.使用CreateThread函数创建线程,并且可以通过CreateMutex创建一个互斥量实现线程间数据的同步: #includ ...
- HDU - 4734 F(x) (2013成都网络游戏,数字DP)
意甲冠军:求0-B见面<=F[A]所有可能的 思维:数字DP,内存搜索 #include <iostream> #include <cstring> #include & ...
- (记录)mysql分页查询,参数化过程的坑
在最近的工作中,由于历史遗留,一个分页查询没有参数化,被查出来有sql注入危险,所以对这个查询进行了参数化修改. 一看不知道,看了吓一跳,可能由于种种原因,分页查询sql是在存储过程中拼接出来的,wh ...
- 信号、系统与滤波器设计(matlab)
0. 基本概念 AWG:Additive White(zero-mean) Gaussian,可加白噪声: AWGN:Additive White(zero-mean) Gaussian Noise ...
- MCB2300的CTM1050(CAN) - 系列示意图
这一系列示意图由Portel DXP 2004绘. 截图: 文件下载: CTM1050.7z 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- angular form set dynamic control(form动态设置control)
实现效果 form表单控件的实时更新 效果如图 关键代码 validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) ...
- WPF 通过CommandBinding捕获命令
RoutedCommand与业务逻辑无关,业务逻辑是通过CommandBinding来实现 using System; using System.Collections.Generic;using S ...
- 通通玩blend美工(1)——荧光Button
原文:通通玩blend美工(1)--荧光Button 最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...) 看着各位大虾出 ...