自适应布局和响应式布局媒体查询

自适应布局和响应式布局媒体查询

1. 自适应布局的特点
分别为不同的分辨率的屏幕定义布局。每一个静态布局对应一个分辨率范围。
在每个静态布局中，页面元素的尺寸不随屏幕大小的变化而变化。除非屏幕尺寸变化让页面从这个静态布局变成了另外一个静态布局。
自适应布局虽然有好几套样式布局，但是对于用户来说网页是一样的，只是页面的元素的大小发生了变化。

2. 自适应布局的原理
针对不同分辨率采用@media媒体查询给不同范围的屏幕分别写一套样式布局，每一套样式布局采用的还是静态布局的方式。
2.1 添加元标签
2.2 尽量少使用绝对宽度
2.3 字体使用相对大小

1. <meta name="viewport" content="width=device-width, initial-scale=1" />
   

复制代码

2.4 媒体查询

1. @media screen and (min-width: 768px) {.block{width: 680px;background-color: yellow;}
   
2. }
   
3. @media screen and (min-width: 1024px) {.block{width: 768px;background-color: blue;}
   
4. }
   
5. @media screen and (min-width: 1580px) {.block{width: 1190px;background-color: red;}
   
6. }

复制代码