Catch
标签:CSS

利用vw+rem进行移动端布局

在做移动端布局的时候。利用px进行布局,发现需要进行各种手机的适配。 所以在开发的时候,想着引用lib-flexible库(即手淘的方案),询问了一些同事,会有一些字体和一些诡异的问题。 后来找到了一个很好用的适配方案。利用vw+rem,感觉还不错,所以大胆尝试了一把。 根据CSS3规范,视口单位主要包括以下4个: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况) 例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。 兼容性 利用视口单位适配页面 对于移动端开发来说,最为重要的一点是如何适配页面,实现多终端的兼容,不同的适配方式各有千秋,也各有缺点。 就主流的响应式布局、弹性布局来说,通过Media Queries 实现的布局需要配置多个响应断点,而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率维持不表,而在响应断点切换的瞬间,布局带来断层式的切换变换,如同卡带的唱机般"咔咔咔"地一又一下。 而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得C

4月前 130浏览

stylus安装与自动编译

介绍 stylus是一个css预处理框架。来自node社区,主要用来给node项目进行css预处理支持,但是也可以用作普通静态网页开发,stylus文件后缀是.styl。 stylus安装 npm i stylus -g 运行stylus -h可以获得相关的命令行支持 自动化编译 自动编译文件夹 下面命令-w是自动监视文件,-o是输出文件或目录位置,-c是压缩 stylus -w src/styl -o assets/css -c 自动编译文件 stylus -w src/styl/style.styl -o assets/css/style.css -c

5月前 129浏览