# 响应式布局

# 概念

指网页能自动试别屏幕宽度、并做出相应调整的网页设计。可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

# 媒体类型

常用媒体类型

选项	说明
all	所有媒体类型
screen	计算机屏幕（默认值）,平板电脑，智能手机等
print	打印设备
speech	应用于屏幕阅读器等发声设备

注：tty, tv, projection, handheld, braille, embossed, aural 设备类型已经被废弃

# style

style标签指定媒体类型

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>响应式网页</title>
  <style media="screen">
    h1 {
      color: black;
    }
  </style>
  <style media="print">
    h1 {
      color: red;
    }
  </style>
</head>

<body>
  <h1>hello 2023-05-10！星期三</h1>
</body>

# link

在 link 标签中通过 media 属性可以设置样式使用的媒体设备。

common.css 没有指定媒体所以全局应用

h1 {
  border: 1px solid red;
}

screen.css 应用在屏幕设备

h1 {
  font-size: 16px;
  color: blue;
}

print.css 应用在打印设备

h1 {
  font-size: 24px;
  color: red;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>响应式网页</title>
  <link rel="stylesheet" href="./common.css" />
  <link rel="stylesheet" href="./screen.css" media="screen" />
  <link rel="stylesheet" href="./print.css" media="print" />
</head>

<body>
  <h1>hello 2023-05-10！星期三</h1>
</body>

# @import

使用@import 可以引入指定设备的样式规则。文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。

<style>
    @import url(./screen.css) screen;
    @import url(./print.css) print;
</style>

# @media

可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>响应式网页</title>
  <style>
    @media screen {
        h1 {
            color: black;
        }
    }
    @media print {
        h1 {
            color: red;
        }
    }
  </style>
</head>

<body>
  <h1>hello 2023-05-10！星期三</h1>
</body>

多设备支持

@import url(screen.css) screen,print;

<link rel="stylesheet" href="./screen.css" media="screen,print">

@media screen,print {...}

# 媒体方向

值	说明
portrait	竖屏设备即高度大于宽度
landscape	横屏设备即宽度大于高度

<style media="screen and (min-width: 768px),screen and (orientation:landscape)">
  body {
    color: blue;
  }
</style>
<h1>baidu</h1>

# 媒体属性

以下常用的媒体查询特性

特性	说明
orientation: landscape 、 portrait	landscape 横屏，portrait 竖屏
width	设备宽度
height	设备高度
min-width	最小宽度
max-width	最大宽度
min-height	最小高度
max-height	最大高度

# 逻辑操作符

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

# and

满足多个条件时样式才生效，示例如下

横屏显示且宽度不能超过 600px

 <style>
    @media screen and (orientation: landscape) and (max-width: 600px) {
        body {
            background: red;
        }
        h1 {
            font-size: 24px;
            color: white;
        }
    }
</style>

# or

多个 或 条件查询使用逗号连接。示例如下

横屏显示或宽度不超 600px 时就使用样式规则。

<style>
    @media screen and (orientation: landscape),screen and (max-width: 600px) {
        h1 {
            color: red;
        }
    }
</style>

# not

not操作符用来对一条媒体查询的结果进行取反

[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

/* monochrome ：黑白设备 */
@media not all and (monochrome) { ... }
/* 等价于 */
@media not (all and (monochrome)) { ... }

# only

用来排除不支持媒体查询的浏览器。

对支持媒体查询的设备，正常调用样式，此时就当 only 不存在
对不支持媒体查询的设备不使用样式
only 和 not 一样只能出现在媒体查询的开始

@media only screen and (orientation: landscape) and (max-width: 600px) {
	...
}

# 媒体查询注意点

样式表的底部编写，有助于样式覆盖生效。
移动端->pc端适配原则：min-width从小到大【移动优先原则：先编写移动端后过渡到pc端】
pc->移动端： max-width 从大到小

← 鼠标样式 cursor