自适应布局和响应式布局媒体查询
自适应布局和响应式布局媒体查询1. 自适应布局的特点
分别为不同的分辨率的屏幕定义布局。每一个静态布局对应一个分辨率范围。
在每个静态布局中，页面元素的尺寸不随屏幕大小的变化而变化。除非屏幕尺寸变化让页面从这个静态布局变成了另外一个静态布局。
自适应布局虽然有好几套样式布局，但是对于用户来说网页是一样的，只是页面的元素的大小发生了变化。
2. 自适应布局的原理
针对不同分辨率采用@media媒体查询给不同范围的屏幕分别写一套样式布局，每一套样式布局采用的还是静态布局的方式。
2.1 添加元标签
2.2 尽量少使用绝对宽度
2.3 字体使用相对大小
<meta name="viewport" content="width=device-width, initial-scale=1" />
2.4 媒体查询
@media screen and (min-width: 768px) {.block{width: 680px;background-color: yellow;}
}
@media screen and (min-width: 1024px) {.block{width: 768px;background-color: blue;}
}
@media screen and (min-width: 1580px) {.block{width: 1190px;background-color: red;}
}
页:
[1]