Html-媒体查询布局

基础

• 通过@media 媒体查询，给不同屏幕的大小编写不同的样式来实现响应式的布局
• 缺点：工作量大，效率低，代码累赘，以及加载事件过长
• 语法：

  @media mediatype and not only (media feature) { css-code }

• 用法：
  • head 标签中引入(限定对应宽度使用对应 css 文件)：

    <link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 600px)" href="small.css" />

  • css 中引入：

    @media screen and (min-width:1200px) { body { background: red; } }

特性

• width | height: 视口的宽高
• min-width: 视口的最小宽度（视口大于指定宽度时生效）
• max-width: 视口的最大宽度（视口小于指定宽度时生效）
• @media: 是关键字

断点

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

常用的断点	代表的尺寸
<576px	Extra small	max-width=576px
>=576px	Small — sm	min-width=769px
>=769px	Medium — md	min-width=769px
>=992px	Large — lg	min-width=992px
>=1200px	X-Large — xl	min-width=1200px
>=1400px	XX-Large — xxl	min-width=1400px

常用的媒体类型(mediatype)

媒体类型	备注	常用
all	匹配所有设备	是
print	打印模式	是
screen	电脑屏幕	是

修饰符

• not:

  @media not screen and (width:888px){} // 对除了 screen 类型之外的所有设备类型生效。

• only:

  @media only screen and (width:888px){} // 只对 screen 类型有效

可查询属性（media feature）

可查询属性	属性值类型	是否可用前缀	描述	常用
color	整数	是	每一组输出设备的彩色原件个数。不是彩色设备，则等于 0	否
color-index	整数	是	在输出设备的彩色查询表中的条目数。没有使用彩色查询表，则为 0	否
width	长度	是	输出设备中的页面可见区域宽度	是
height	长度	是	输出设备中的页面可见区域高度	是
device-width	长度	是	输出设备的屏幕可见宽度(设备本身的宽度)	是
device-height	长度	是	输出设备的屏幕可见高度(设备本身的高度)	是
grid	整数	否	查询输出设备是否使用栅格或点阵。值：1 代表是，0 代表否	否
resolution	dpi/dpcm	是	设备的分辨率	否
orientation	portrait/landscape	否	height 是否大于或等于 width。portrait(竖屏),landscape(横屏)	是
aspect-ratio	整数/整数	是	width 与 height 的比率(宽高比)	是
device-aspect-ratio	整数/整数	是	(设备的宽高比),常见的显示器比率：4/3, 16/9, 16/10	是
scan	progressive/interlaced	否	电视类设备的扫描工序	否
monochrome	整数	是	在单色框架缓冲区中每像素包含的单色原件个数。不是单色设备，则为 0	否

移动端常见宽高

• 竖屏常用宽高比：1:2, 2:3, 3:4, 3:5, 5:8, 9:16
• 横屏常用宽高比：4:3, 5:3

宽高	比例
320×480	2:3
480×854	约 9:16
480×800	3:5
480×640	3:4
540×960	9:16
600×1200	1:2
600×1024	约 9:16
640×960	2:3
640×1136	约 9:16
720×1280	9:16
768×1024	3:4
800×480	5:3
800×1280	5:8
1080×1920	9:16
1536×2048	4:3
1600×2560	5:8