关于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 ...
随机推荐
- DELPHI +ClientDataSet+DBGRIDEH 进行排序
DELPHI +ClientDataSet+DBGRIDEH 进行排序因为使用了DBX+ClientDataSet,所以排序显得简单些,只需要设定几个属性就OK了.1.DbGridEH 中设定:Op ...
- Android中使用ListView实现自适应表格
GridView比ListView更容易实现自适应的表格,但是GridView每个格单元的大小固定,而ListView实现的表格可以自定义每个格单元的大小,但因此实现自适应表格也会复杂些(格单元大小不 ...
- 关于提高UDP发送效率的方法
UDP的发送效率和什么因素有关呢? 直观觉得,UDP的切包长越大,应该发送效率越高(最长为65536).可是依据实际測试和在网上查到的资料的结果,包长度为1024为发送效率最高. 这样的结果让人感到疑 ...
- 1.node 在node中 进行包与包之间函数的调用 module.exports
本文参考学习了廖雪峰的大作 模块 但是廖的文章只模块只有一个函数,在此演示一个模块中有两个函数,在另外一个函数中是如何去调用的 //hello.js包中的内容'use strict'; var s=' ...
- windows下Redis 主从读写分离部署
原文:windows下Redis 主从读写分离部署 1.可直接下载window下的运行文件(下面这个链接) 也可以浏览github 查看相应的版本说明文档 https://github.com/Ser ...
- js调查server
<script type="text/javascript"> function showUnreadNews() { $(document).ready(functi ...
- 用WPF实现在ListView中的鼠标悬停Tooltip显示
原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一.具体需求描述 在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息. 二.代码 ...
- Matlab随笔之线性规划
原文:Matlab随笔之线性规划 LP(Linear programming,线性规划)是一种优化方法,在优化问题中目标函数和约束函数均为向量变量的线性函数,LP问题可描述为:min xs.t. ...
- 关于 Swift 中的 Array.contains 方法
Swift 2.0 中对语言进行了又一次的改进,这次将整个语言变得更加面向对象化,比如在 Swift 1.x 中如果要判断某个元素是否在数组中,就需要用到 contains 函数: if contai ...
- WPF 自定义图片剪切器 - 头像剪切(扩展与完善、实时截图)
原文:WPF 自定义图片剪切器 - 头像剪切(扩展与完善.实时截图) 一.说明:上一次写的"WPF 自定义图片剪切器 - 头像剪切.你懂得"存在明显的缺陷,由于篇幅较长.重新写了一 ...