响应式布局

网页可以根据不同的设备或窗口大小呈现不同的效果。

使用响应式布局，可以使用过网页适用于所以设备。

响应式的关键就是媒体查询，通过媒体查询可以为不同的设备或不同的状态来分别设置样式。

媒体查询的类型

可以使用逗号连接多个媒体类型，他们直接就是或的关系。

1. all：所以设备
2. print：打印设备
3. screen：带屏幕的设备
4. speech：屏幕阅读器

可以在媒体类型前添加一个 only，表示只有此设备，是为了兼容一些老版本的浏览器。

媒体特征

width：视口宽度

height：视口高度

/* 视口宽度为500px时样式才生效 */
@media (width: 500px) {
    h1{
        color: red;
    }
}

min-width：视口的最小宽度

max-width：视口的最大宽度

/* 生效该样式的最小视口宽度为500px */
@media (min-width: 500px) {
    h1{
        color: red;
    }
}

/* 生效该样式的最大宽度为1200px */
@media (max-width: 1200px) {
    h1{
        color: red;
    }
}

媒体查询的语法

@media screen and (min-width:500px) and (max-width: 700px) {
    h1{
        color: red;
    }
}

断点

样式切换的分界点，我们称之为断点，也就是样式会在这个点时发生变化。

常用的断点：

小于768px：超小屏幕（max-width)

大于768px：小屏幕（min-width=768px)

大于992px：中型屏幕（min-width=992px)

大于1200px：大型屏幕（min-width=1200px)

and，或(,)，not

生效该样式的最小宽度是500px或最大宽度是300px

@media (min-width:500px),(max-width:300px) {
    h1{
        color: red;
    }
}

生效该样式的最小宽度是500px以及最大宽度是800px

@media (min-width:500px) and (max-width:800px) {
    h1{
        color: red;
    }
}

二级标题

大大王我达瓦达瓦大阿达哇打我

• 打我打我的
• 达瓦达瓦的
• 啊达瓦