Vue使用lib-flexible,将px转化为rem
2024-08-30 02:10:35
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:
}
}
同时,在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=""] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
font-size: 14px;
} [data-dpr=""] .text {
font-size: 28px;
} [data-dpr=""] .text {
font-size: 42px;
}
3、对边框样式增加/* no */后缀,会保持原样
.box{
border: 1px solid #fff; /* no */
}
// 会被编译成如下:
.box{
border: 1px solid #fff;
}
最新文章
- 别出心裁的Linux命令学习法
- 替换url中某个参数的值或是添加某个参数的方法(js 分页上下页可以使用)
- ios UIButton设置单选效果,以及同时设置图片和标题
- 检测网页地址有效性java代码
- matlab读取指定路径下的图像
- Windows下安装和配置Maven的方法及注意事项
- vim在编译器 . 命令(点命令)
- ASP.NET Cookie和Session
- Java学习笔记(5)
- css属性书写顺序分析
- rsync实现文件同步
- 关于sentinel LDK加密war包实现应用加密的使用方法
- [转]AJAX 跨源 HTTP 请求
- 谁动了我的Mac ??
- selenium - 查看selenium版本信息
- elastic_search 指令
- 【转】ASP.NET Core 快速入门(环境篇)
- Setting 之dashboard 点击跳转流程
- FZOJ Problem 2148 Moon Game
- PLSQL练习-数据共享与整合技术