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> ...
随机推荐
- hdoj--3440--House Man(差分约束)
House Man Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- USACO 2.2 Runaround Numbers
Runaround Numbers Runaround numbers are integers with unique digits, none of which is zero (e.g., 81 ...
- kubernetes系列:(一)、kubeadm搭建kubernetes(v1.13.1)单节点集群
kubeadm是Kubernetes官方提供的用于快速部署Kubernetes集群的工具,本篇文章使用kubeadm搭建一个单master节点的k8s集群. 节点部署信息 节点主机名 节点IP 节点角 ...
- Bata版本
一.团队成员 1)冯鹏(组长) 201731062617 2)鲜泽 201731062612 3)李家豪 201731062614 4)郭经伟 201731062615 5)程前勇 2017310 ...
- SQL Server 日常维护--查询当前正在执行的语句、死锁、堵塞
查询当前正在执行的语句: SELECT der.[session_id],der.[blocking_session_id], sp.lastwaittype,sp.hostname,sp.progr ...
- Centos7 minimal 系列之rabbitmq的理解(九)
一.前言 传送门:rabbitmq安装 第一次接触消息队列,有很多不熟悉的地方,可能也有很多写的不对的,大家一起学习. RabbitMQ是一个在AMQP基础上完成的,可复用的企业消息系统. 使用场景: ...
- Hua Wei 机试题目四---2014
一.计算亮灯的个数 描述:一条长廊里依次装有n(1≤n≤65535)盏电灯,从头到尾编号1.2.3.…n-1.n.每盏电灯由一个拉线开关控制.开始,电灯全部关着. 有n个学生从长廊穿过.第一个学生把号 ...
- struts2学习之基础笔记6
第十一章 Struts 2的国际化 1 国际化简介 http协议,request_locale值 Locale类àà封装类request_locale值 ResourcesBandleàà ...
- 关于getElementsByTagName的遍历顺序
关于getElementsByTagName的遍历顺序是怎么样的呢? getElementsByTagName的遍历顺序是从HTML的页面从上到下遍历还是按照标签的嵌套顺序层层遍历的呢? 来做个小小的 ...
- WCF(四)windows服务寄宿
WCF常用的寄宿方式除了IIS寄宿外,还有一种方式是寄宿到windows服务中,跟随系统启动而启动. 1.在项目中选择“添加”--“新建windows服务” 2.打开系统生成的设计界面的代码,引用“u ...