媒体查询

约 302 字大约 1 分钟

2024-10-02

媒体查询能够检测视口的宽度, 然后编写差异化的CSS样式.

当某个条件成立, 执行对应的CSS样式.

@media (媒体特征) {
	选择器 {
		CSS属性
	}
}

目前rem布局方案中, 将网页等分成10份, Html标签的字号为视口宽度的 $\frac{1}{10}$

@media (width: 320px) {
	html {
		font-size: 32px;
	}
}

@media (width: 375px) {
	html {
		font-size: 37.5px;
	}
}

@media (width: 414px) {
	html {
		font-size: 41.4px;
	}
}

媒体查询的完整写法(了解)

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

关键词/逻辑操作符.
- and.
- only.
- not.
媒体类型.
- 用来区分设备类型, 如屏幕设备, 打印设备等, 其中手机, 电脑, 平板, 都属于屏幕设备.
- screen: 带屏幕设备.
- print: 打印预览模式.
- speech: 屏幕阅读模式.
- all: 默认, 包括以上3种情形.
媒体特性.
- width, height: 视口宽高.
- max-width, max-height: 视口最大宽高.
- min-width, min-height: 视口最小宽高.
- orientation: 屏幕方向.
  - portrit: 竖屏.
  - landscape: 横屏.

外部 CSS

<link rel="stylesheet" media="逻辑符媒体类型 and (媒体特性) href="CSS"

版权所有

版权归属：洱海

许可证：署名 4.0 国际 (CC-BY-4.0)