细说移动端 经典的REM布局 与 新秀VW布局
和以往一样，本次项目也放到了 Github 中，欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定纵横比 5. REM + VW布局 6. 对比选择 ...
花费 7 ms
H5移动端适配之px转vw（附工具）
最近做官网H5的开发，开发之前首先想到的是移动端的适配问题。目前比较流行的有rem和vw，我选择了vw，但是设计稿的单位是px，转化成vw，要有很多的计算，不方便，所以就想着先按设计稿把界面写出来，然后一次性把单位换算过来。首先想到的是用webpack插件处理，但是自己需要配置环境，所以就想 ...
react中将px转化为rem或者vw
一、px转rem 1、执行显示webpack配置 2、安装 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sass ...
一行css代码轻松实现前端响应式布局（vw+rem）
大家知道rem可以用来做响应式布局，只是html元素上的font-size样式需要根据屏幕宽度来指定。 之前有用@media媒体查询，根据各种屏幕宽度写html的样式，也用过类似lib-flexible这样的js库动态改变html样式，总觉得挺麻烦的。 今天突然想到vw这个单位，发现用它来做 ...
小tips：使用rem+vw实现简单的移动端适配
首先设置meta属性，如下代码： 使用如下代码就能实现移动端的适配： 100vw相当于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！那么1vw就是表示1%的屏幕宽度。 其中的13.33333333vw ...
CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
css单位我们常用的是px,也即是像素。随着网页开发自适应的要求，css3新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等。 em 做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器 ...
vw viewpoint 兼容性
1、caniuse https://caniuse.com/#search=vw 2、安卓4.4以下不支持。 ...
使用手淘VW适配方案后造成伪类使用content报错的解决办法
报错如下： 报错原因： postcss-viewport-units 插件自动给每个元素添加了content 解决办法： 配置.postcssrc.js的postcss-viewpor ...
关于h5屏幕适配
1）使用rem进行等比缩放 rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小 比如根元素（html）设置font-size=12px; 非根元素设 ...