vue适配移动端px自动转化为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.设置meta标签
通过meta标签,设置设备宽度以及缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安装px2rem-loader
npm install px2rem-loader
5.配置px2rem-loader
这里是重要的一步~~
在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
同时,在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
6.重启,一切ok~
当配置完之后,只需要重启下服务,就自动转化为rem了
npm run dev
vue适配移动端px自动转化为rem的更多相关文章
- 移动端px自动转化为rem
注:不转换的px用大写PX代替 lib-flexible 作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装:cnpm ...
- vue-app项目,将px自动转化为rem
1. 安装lib-flexible: npm install --save lib-flexible 2.安装postcss-loader和postcss-px2rem: npm install -- ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- 60.Vue:将px转化为rem,适配移动端
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- Vue:将px转化为rem,适配移动端vant-UI等框架(px2rem-loader)
转载:https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm ...
- px2rem-loader(Vue:将px转化为rem,适配移动端)
转载:https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm ...
- Vue使用lib-flexible,将px转化为rem
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
随机推荐
- 【故障公告】10:30-10:45 左右 docker swarm 集群节点问题引发故障
非常抱歉,今天 10:30-10:45 左右由于 docker swarm 集群节点出现问题,造成除博客之外的站点出现访问异常,由此给您带来很大的麻烦,请您谅解. 故障开始时出现有时访问正常有时访问出 ...
- javascript错误信息
ECMA-262 定义了下列 7 种错误类型: TypeError 类型错误 ReferenceError 引用错误 SyntaxError 语法错误 Error 错误 EvalError 全局错误 ...
- django开发新手教程(原创)
为了帮助新手简单高效解决django开发的问题,从而写了这么一篇,随便转载! 本人用的是windows10操作系统 #联网安装 ==指定版本号 我在自定义的www文件夹安装C:\Users\ ...
- 网页分享到facebook
一.在网页头部加入如下代码: <meta property="og:url" class="fb_url" content="分享url&quo ...
- visual studio 配置属性中增加自定义宏和宏值
visual studio中有一些预先定义的宏,用于配置项目属性,如SolutionDir.我们也可以自定义类似的宏,从而在配置包含目录(include)或添加依赖项时简化配置项. 如何创建自己的宏呢 ...
- Tomcat FAIL - Deploy Upload Failed, Exception: org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (110960596) exceeds the confi
https://maxrohde.com/2011/04/27/large-war-file-cannot-be-deployed-in-tomcat-7/ Go to the web.xml of ...
- RabbitMQ的一些有用教程
最近学习了一些RabbitMQ的知识,现在对所阅读过的一些非常优秀的教程进行总结,感谢各位博主和大神的无私奉献. 一.原理篇 https://blog.51cto.com/lookingdream/2 ...
- Android 开发之Windows环境下Android Studio安装和使用教程
JDK环境配置: http://www.cnblogs.com/liuhongfeng/archive/2015/12/30/5084896.html Android Studio下载地址:http: ...
- Django2 Django MTV模板
1.MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务对象与数据库 ...
- maven:私服的相关配置
添加到settings.xml中 <server> <id>releases</id> <username>admin</username> ...