html媒体查询，同一个网页，在不同的条件下，使用不同的样式。

媒体查询简述

设备：

• 屏幕：PC 手机端
• 打印机
• 屏幕阅读器

尺寸：

• 常见尺寸 320-420之间

响应式网页：同一个网页，在不同的条件下，使用不同的样式。

rem/百分比：等比例缩放。
【注】
使用min-width时，通常将小的条件放在前面。
使用max-width时，通常将大的条件放在前面。

实现方式：

内嵌式
格式：@media 设备名 逻辑关键词（and , not）（条件）{
样式；
}
外链式:
通过link标签引入样式，再通过media属性设置样式引用的条件。
< link rel=“stylesheet” href=“css/m1.css” media=“screen and (max-width:1200px)”>

逻辑关键词：

• and 满足多个条件
• ,逗号 多个条件中满足一个条件
• not 逻辑非 只要不满足条件就会生效。

设备方向：

• opientation 属性可以定义设备的方向
  portrait 竖屏设备 高度大于宽度
  landscape 横屏设备 宽度大于高度

常见的查询特性：

• orientation … landscape portrait
• width … 设备的宽度
• height … 设备的高度
• min-width … 最小宽度
• max-width … 最大宽度
• min-height … 最小高度
• max-height … 最大高度

max-width

宽度小于等于。
使用max-width时，通常将大的条件放在前面。
示例：

       /* 设备是屏幕设备  宽度小于等于1500px  */
        @media</