发表于: 2019-03-25 00:34:51
2 675
今天看了很多关于弹性布局和响应式,视窗单位VW.VH的文章
https://blog.csdn.net/gbwine/article/details/84204376
响应式的优点
在于几个特定的几个主流设备尺寸下呈现完美适配
缺点
“布局在响应断点范围内的分辨率下维持不变,而在响应断点切换的瞬间,布局带来断层式的切换变化,如同卡带的唱机般‘咔咔咔’地一下又一下”
断点太多不容易适配,切换变化差异太大。
弹性布局
需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得 CSS 与 JS 耦合了在一起
vw
依赖于视口大小而自动缩放,无论视口过大还是过小,它也随着视口过大或者过小,失去了最大最小宽度的限制
将vw和rem单位结合
- 给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
- 限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度
评论