安装: 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 } }] } 也支持聚合的写法 module: { rules…

这是一款针对webpack的像素转vw单位的loader插件. 笔者公司中,h5 rem的开发方案目前已经渐渐开始转向vw方案,因此本工具应运而生. 目前所制作的h5,大部分设计稿分辨率都是750的宽度,所以设定的基础分辨率是750,如果遇到特殊情况,只需要简单修改一下配置即可. 安装: npm i px2vw-view-loader 配置:按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ test: /\.c…

一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配,笔者想起了自己的以前写过的一个转换小工具, 大家可以看之前我的文章和我一起使用postcss+gulp进行vw单位的移动端的适配 老实说,笔者根据之前的记录,根本就没有还原出小工具,实在是汗颜.不过,在笔者实在无法精确还原工具之后,笔者找到了之前练习的demo. 笔者一下子就搞定了. 先给大家看下项…

随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于视口(viewport)的宽度和高度 ,1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度: 1vh等于视口高度(viewport height)的百分之一.做移动端适配的时候,试想想,也就是将手机的视口进行高密度的细分,随着屏幕的改变,1vw所代表的视口…

px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div宽度为100px,你显示器上看这个div是10厘米,我显示器上看是20厘米.另外一个px点的长度不一定是1:1的正方形,有的设备上长度比是不一样的. 更多px信息点此博客. px的兼容性:需要注意的是谷歌浏览器最小可以…

使用如下代码时,发现字号不会变大,反而会变小:size = (int) mText.getTextSize() + 1;mText.setTextSize(size);后来发现getTextSize返回值是以像素(px)为单位的,而setTextSize()是以sp为单位的,两者单位不一致才造成这样的结果. 这里可以用setTextSize()的另外一种形式,可以指定单位:setTextSize(int unit, int size)TypedValue.COMPLEX_UNIT_PX : Pi…

一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要安装的插件 1.loader ( https://github.com/JacksonTian/loader )(配合编译使用的) 2.loader-builder( https://github.com/JacksonTian/loader-builder )( 打包的) 3.完整的笔记地址,是x…

当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验.通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端. 使用lazy loader插件很简单,只要在页面中引入lazy loader插件,然后为页面上的图片调用延迟加载方法就可以了.lazy loader插件的下载地址:http:…

近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美的解决了适配问题,下面是自己动手搭建后的一些整理. 创建项目 //vue-cli 3.0+ 版本 vue init webpack vue-vw-demo cd vue-vw-demo 安装必要插件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport…

1.打包图片 // { // test: /\.(png|jpe?g|gif)$/i, // use: [{ // loader: 'file-loader', // options: { // name: '[name].[ext]', // }, // }, ], // }, 打包文件用的. 占位符的这种思维可以作为我们软件架构的一部分. 2.打包图片的另一种方式 { test: /\.(png|jpe?g|gif)$/i, use: [{ loader: 'url-loader', opt…