本文介绍了自适应布局的两种方式，一种是通过rem和JS实现，另一种是使用CSS视口单位vw和vh。重点讲解了CSS3的视口单位，包括vw、vh、vmin和vmax，它们根据浏览器视口尺寸的百分比定义尺寸。同时，讨论了响应式布局与自适应布局的区别，响应式布局更注重根据不同屏幕尺寸调整页面展现方式和布局。
目前就我了解的自适应两种方式：
- 在移动端中利用rem的相对于根HTML进行改变，通过一段JS实现了移动端自适应
- 使用纯CSS视口单位来自行自适应
纯CSS3使用vw和vh视口单位实现自适应
像素与浏览器视口的细节
使用VH和VW实现真正的流体排版
谈谈rem与vw — rem
“自适应布局”，它又叫做响应式布局，主要是针对页面在不同的设备，不同的屏幕大小，不同的分辨率下对页面布局的自动适应，我的理解就是等比例缩放（任何设备或者窗口任意改变的情况下）。
响应式布局的实现依靠***媒体查询***（ Media Queries ）来实现
@media 可以针对不同的屏幕尺寸设置不同的样式
通过 rem 单位来实现适配，内嵌一段脚本去动态计算根元素大小。这样比较麻烦，就需要新的办法去真正地适配所有设备尺寸。
通常用的相对字体单位（注* 如px, pt, em）只是相对于HTML根元素的大小而自动改变，而不是相对于用户的屏幕。于是引入了视口单位
最低0.47元/天 解锁文章
扫一扫
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
