媒体查询

兼容不同设备屏幕 适应 自动更改 适配 调整大小

梗概:

媒体查询可以使指定的css样式仅在特殊情况下才生效

语法:

child::

媒体查询 语法

大致语法:

@media 媒体类型 and (媒体特征规则) {
  p {
	  color: blue;
  }
}

1. 说明:

1. 媒体类型就是该css样式生效时的必要环境 可以是:
   • all
     • 全部类型
   • print
   • screen
     • 常常搭配宽高媒体特征规则一起出现
   • speech
2. 媒体类型与媒体特征规则可以单独出现
3. and是逻辑连接符, 表示与, 即同时满足两个规则
   1. ,为或

媒体特征规则:

1. 宽高特征值:

1. (max-width: 200px) 表示0到200px
2. (min-width: 200px) 表示200px以上
3. (min-width: 100px) and (max-width: 200px) 表示100px到200px
4. (height: 400px) 表示当height刚好为400px

2. 屏幕朝向:

(orientation: portrait或landscape)

1. 竖放（portrait）
2. 横放（landscape）

3. 可悬浮设备:

(hover: hover)

1. 表示可以实现类似鼠标悬浮的设备

4. 设备指点类型:

(pointer: none或fine或coarse)

1. fine指针是类似于鼠标或者触控板的东西，它让用户可以精确指向一片小区域。
2. coarse指针是你在触摸屏上的手指。
3. none值意味着，用户没有指点设备，也许是他们正只使用键盘导航，或者是语音命令。

详细教程链接:

媒体查询入门指南 - 学习 Web 开发 | MDN

指向原始笔记的链接