响应式

媒体查询

根据设备宽度的变化，设置差异化样式

css

@media (媒体查询) {
  /* 样式 */
}

/* eg: */

/* 视口宽度小于等于768px*/
@media (max-width: 768px) {
  /* 样式 */
}

/* 视口宽度大于等于1200px*/
@media (min-width: 1200px) {
  /* 样式 */
}

多个媒体查询，需要注意顺序，遵循 css 层叠性

完整写法

css

@media 关键词 媒体类型 and (媒体特性) {
    css代码
}

1、关键词

and
only
not

2、媒体类型

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上 3 种情形

3、媒体特性

特性名称	属性	值
视口宽和高	width、height	数值
视口最大宽或最大高	`max-width`、max-height	数值
视口最小宽或最小高	`min-width`、min-height	数值
屏幕方向	orientation	portrait：竖屏/ landscape 横屏

常用写法

css

@media (min-width: 1200px) {
  /* PC样式 */
}

@media (min-width: 992px) {
  /* 样式 */
}

@media (min-width: 768px) {
  /* >=768px 样式 */
}

外链式 css 引入

html

<link
  rel="stylesheet"
  media="逻辑符 媒体类型 and (媒体特性)"
  href="index.css"
/>

<!-- eg: 注意小括号不能丢 -->
<link rel="stylesheet" media="(min-width: 992px)" href="index-992.css" />
<link rel="stylesheet" media="(min-width: 1200px)" href="index-1200.css" />

响应式 ​

媒体查询 ​

完整写法 ​

响应式

媒体查询

完整写法