跳至主要內容

CSS - 媒体查询

Kamimika...大约 2 分钟CSSCSS笔记

@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)桌面显示器
\geq 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" /> <!-- 屏幕阅读器 -->
上次编辑于:
贡献者: wzh656
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.0