你不知道的css各类布局(三)之自适应布局
2024-09-04 01:29:20
自适应布局
概念
自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称
自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小。自适应布局和静态布局类似也是采用绝对长度单位(px、pt、mm、cm、in),但不同点在于它通过media query为页面指定了多个固定宽度。
布局特点
自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素的位置会变化但是大小不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在同一个设备下实际还是固定的布局。(媒体查询 + 静态布局)
实例
注意 max-width:代表小于等于,min-width代表大于
优点
在对原始的静态布局页面升级时(比如支持手机端),自适应布局就是一种很好的折中方案。这要比直接重构为响应式的容易的多。
缺点
在不同的breakpoint(可以理解为分界点但,比如上面例子中的768, 769,1024,1025)里显示不够完美,总是会存在比较大或者比较小的额外空间,页面会显得很突兀。
最新文章
- 简单的maven配置
- mysql查询语句select-子查询
- iOS 禁止边缘滑动返回
- iOS 向模拟器里添加照片
- MyBatis之多表关联查询
- SQLite常用网址
- js上传和预览图片
- [codility]Falling-discs
- 高效的数组去重(js)
- springmvc的一些记录
- 开篇-我眼中的FPGA
- @Data 注解引出的 lombok 小辣椒
- $translate 的用法
- WebPack引用Bootstrap 无法使用图标的结局方案
- ape 文件 转化为mp3 文件
- springMVC整理02--常用注解的使用
- MySQL(作业练习)
- PU-bound(计算密集型) 和I/O bound(I/O密集型)
- C#应用视频教程3.4 Halcon+C#测试
- ios 单个ViewController屏幕旋转