CSS ::媒体查询

• Z时代
• 2024-01-10
• 分类：综合

您可能习惯于使用媒体查询来检测视口的宽度和高度以及媒体类型（最常见的是屏幕或打印）。5级媒体查询规范为我们（可选）测试了一些较新的媒体功能，某些浏览器已支持这些功能。这些为可访问性提供了一些巨大的好处。

患有前庭疾病的用户以及患有晕车病的用户可能不喜欢运动频繁的网页，例如动画和视差滚动效果。使用偏好减少运动的媒体查询，我们可以为选择退出的用户提供减少运动的选择。

.my-element {
	animation: shake 500ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
	.my-element {
		animation: none;
	}
}

网站提供替代性深色主题正变得越来越流行。Prefers-colors-scheme允许我们查询用户是否设置了系统范围的首选项（使用关键字dark，light或no-preference），并相应地显示适当的配色方案。

/* Media queries 02 */
body {
	background: linear-gradient(to 
	bottom, #b5faff, #ffe2b4);
}
@media (prefers-color-scheme: dark) {
	body {
		color: white;
		background: linear-gradient(to 
		bottom, #0c1338, #3e3599);
	}
}

以上是 CSS ::媒体查询 的全部内容， 来源链接： utcz.com/z/335678.html