CSS - 媒体查询
...大约 2 分钟
@media mediatype and|not|only (media type) {}
例如:
@media screen and (min-width: 400px) {}
宽高查询
宽度 小于等于 时使用样式
@media (max-width: 12450px) {}
@media (width <= 12450px) {} /* 媒体查询4 */
宽度 大于等于 时使用样式
@media (min-width: 12450px) {}
@media (width >= 12450px) {} /* 媒体查询4 */
常见宽度分割线:
宽度 | 屏幕类型 |
---|---|
<768px | 手机 |
[768px, 992px) | 平板 |
[992px, 1200px) | 桌面显示器 |
1200px | 大桌面显示器 |
屏幕方向(orientation)
竖屏(portrait):
@media (orientation: portrait) {}
横屏(landscape):
@media (orientation: landscape) {}
浅色主题 与 暗色主题 (prefers-color-scheme)
浅色主题
@media (prefers-color-scheme: light) {}
暗色主题
@media (prefers-color-scheme: dark) {}
屏幕显示 与 打印
@media all {} /* 所有设备 */
@media screen {} /* 屏幕显示样式 */
@media print {} /* 打印样式 */
@media speech {} /* 屏幕阅读器 */
逻辑结合(复杂查询)
@media () and () {}
@media () or () {}
@media not() {}
@media (30em <= width <= 50em) {} /* 媒体查询4 */
not, only, all
- not:排除某些指定设备
- only:排除不支持该种媒体查询的浏览器(不应用该样式)
- all:默认省略
引入外部文件时
<link rel="stylesheet" src="styles.css" media="screen" /> <!-- 屏幕显示样式 -->
<link rel="stylesheet" src="styles.css" media="print" /> <!-- 打印样式 -->
<link rel="stylesheet" src="styles.css" media="speech" /> <!-- 屏幕阅读器 -->
Powered by Waline v3.3.0