60.Vue:将px转化为rem,适配移动端
2024-10-06 01:38:17
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: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
同时,在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
6.重启,一切ok~
当配置完之后,只需要重启下服务,就自动转化为rem了
npm run dev
最新文章
- javascript的window.ActiveXObject对象,区别浏览器的方法
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q9-Q12)
- JavaScript 运算符
- Hadoop第7周练习—MapReduce进行数据查询和实现推简单荐系统
- 一些JavaScript题目
- iOS边练边学--static(作用域),copy(深浅拷贝)
- 一个用WPF做的简单计算器源代码
- ASP.NET MVC 传值方法ViewData与ViewBag的区别
- javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式
- python3连接mysql
- git远端密码修改
- 学习用Node.js和Elasticsearch构建搜索引擎(5):mac本机部署canal
- hdu-4763(kmp+拓展kmp)
- 创建一个dynamics 365 CRM online plugin (二) - fields检查
- ElasicSearch(1)
- ubuntu基本用法
- java 泛型的通配符和限定
- 频分复用(Frequency Division Multiplexer)
- javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed
- WPF string,color,brush之间的转换
热门文章
- beta冲刺6/7
- Failed global initialization:FileNotOpen: Failed to open ";C:\MongoDB\data\log\mongo.log"; 安装MongoDB时卡死
- Telsa显卡比较
- react学习一篇就够了
- (转)RBAC权限模型——项目实战
- Chapter 4 : Control Structures 1 : Selection
- Java-IO流之输入输出流基础示例
- redis的编译安装
- es6 ...克隆与函数深度克隆
- react-webpack config webpack@3.4.1