响应式布局 @media

响应式布局

响应式和移动端都可以实现 大屏和小屏的适配，但不同的是
移动端 是做了两个网页，一个pc端的，一个移动端的
而响应式布局是同一个网页，网页可以根据不通的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备

虽然在体验上 响应式 没有 移动端的那么好，但也多提供了一个选择

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

媒体查询 @media

语法

@media 查询类型{}

媒体类型：

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

可以使用 , 连接多个媒体类型，这样它们之间就是一个或的关系

可以在媒体类型前添加一个 only，表示只有
only 的使用主要是为了兼容一些老版本浏览器

/* @media print,screen{
    body{
    	background-color: #bfa;
    }
} */

@media only screen {
    body{
        background-color: #bfa;
    }
}

媒体特性

常用媒体特性：

• width 视口的宽度

• height 视口的高度

• min-width 视口的最小宽度（视口大于指定宽度时生效）

• max-width 视口的最大宽度（视口小于指定宽度时生效）

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

一般比较常用的断点：

1. 小于768 超小屏幕 max-width=768px
2. 大于768 小屏幕 min-width=768px
3. 大于992 中型屏幕 min-width=992px
4. 大于1200 大屏幕 min-width=1200px

@media 后跟多个媒体特性时，, 是或，and 是与，还有一种是 not 对后面整体取反，但不常用

/* 常用格式 */
@media only screen and (min-width: 500px) and (max-width:700px){
    /* 只对屏幕小于700px 大于500px 时的设置 */
    body{
        background-color: #bfa;
    }
}

/* 或者这样 */
@media only screen{
    @media (min-width: 500px) and (max-width:700px){
        body{
            background-color: #bfa;
        }
    }
}