webpack的像素转vw loader插件
这是一款针对webpack的像素转vw单位的loader插件。
笔者公司中,h5 rem的开发方案目前已经渐渐开始转向vw方案,因此本工具应运而生。
目前所制作的h5,大部分设计稿分辨率都是750的宽度,所以设定的基础分辨率是750,如果遇到特殊情况,只需要简单修改一下配置即可。
安装:
npm i px2vw-view-loader
配置:
按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目
module: {
rules: [{
test: /\.css$/,
loader:'px2vw-view-loader',
query:{
viewportWidth: 750,
viewportUnit: 'vw',
minPixelValue:1,
decimal:3
}
}]
}
参数:
| 参数名 | 默认值 | 备注 |
| viewportWidth | 750 | 设计稿宽度,单位像素 |
| viewportUnit | 'vw' | 转换单位 |
| minPixelValue | 1 | 最小转换单位,例如minPixelValue:1,则1px及以下不进行转换 |
| decimal | 3 | 转换后保留的小数位数 |
webpack的像素转vw loader插件的更多相关文章
- webpack的像素转vw单位的loader插件
安装: npm i px2vw-view-loader 配置: 按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ ...
- node作为前台的项目如何打包静态js和css并生成版本号,loader插件的使用
一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要 ...
- 使用jquery的lazy loader插件实现图片的延迟加载
当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验.通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较 ...
- webpack学习(三)html-webpack-plugin插件
一.html-webpack-plugin插件 简单创建 HTML 文件,用于服务器访问 例如:我们要为输出文件添加哈希值标记,避免老的不变的文件重新加载,避免新修改的文件受缓存影响. 在前后两次在终 ...
- webpack——entry,output,plugins,loader,chunk知识
entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...
- webpack安装,常见问题和基本插件使用
一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
- webpack导入css及各项loader
1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...
- webpack 引入jquery和第三方jquery插件
1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...
随机推荐
- qq邮箱的SMTP服务器是什么
qq邮箱的SMTP服务器是什么 QQ邮箱POP3 和 SMTP 服务器地址设置如下:POP3服务器地址为“pop.qq.com”,SMTP服务器地址为“smtp.qq.com”注:1.SMTP服务器需 ...
- 深入理解Oracle索引(1):INDEX SKIP SCAN 和 INDEX RANGE SCAN
㈠ Index SKIP SCAN 当表有一个复合索引,而在查询中有除了索引中第一列的其他列作为条件,并且优化器模式为CBO,这时候查询计划就有可能使用到SS ...
- 【NOI 2002】 银河英雄传说
[题目链接] https://www.luogu.org/problemnew/show/P1196 [算法] 并查集 [代码] #include<bits/stdc++.h> using ...
- 浅谈for循环
for循环 <script> /* ** (1) 是执行代码块之前 ** (2) 运行代码块的条件 ** (3) 需要执行的代码块 ** (4) 代码块执行后执行 ** 执行顺序是(1)( ...
- thinkphp连接数据库,会有大量的sleep连接
show processlist; 说明各列的含义和用途, id列:一个标识,你要kill 一个语句的时候很有用. user列: 显示当前用户,如果不是root,这个命令就只显示你权限范围内的sql语 ...
- Android中的事件分发机制
Android中的事件分发机制 作者:丁明祥 邮箱:2780087178@qq.com 这篇文章这周之内尽量写完 参考资料: Android事件分发机制完全解析,带你从源码的角度彻底理解(上) And ...
- 【工作细节记录】维护项目中前端JS组件丢失后,应如何维护开发之启发
事因: 我所维护的项目为旧项目,接手项目后并没有什么开发文档留下,导致很多时候一出现问题就需要自己去研究整个过程. 项目中一直使用一个"$.download()"的方法进行文件下载 ...
- soapUI检查webServices接口的方法以及对自动触发线程的查询
这几天需要熟悉接口传输过来的数据,因此会用到soapUI,但是没结果这个工具,然后百度了下,结合了下,下面是我对webservice在soapUI的展现: 1:其实说白了,就是我们不知道从接口里传输过 ...
- RocketMQ学习笔记(12)----RocketMQ的Consumer API简介
由于消息的消费方式有两种,所以两种方式也有不同的API: 1. PushConsumer的配置 1. consumerGroup: 默认值为DEFAULT_CONSUMER,Consumer组名,多个 ...
- JavaScript中的线程与进程
定义: 线程分为:单线程和多线程 单线程:一个正在运行的程序(即进行)至少有一个线程,这个线程叫做主线程,只有一个主线程的程序叫做单线程程序,主线程负责执行所有代码的执行(UI展现及刷新.网络请求.本 ...