CSS3 @Media 媒体查询

本文介绍了CSS3的@media规则,用于在不同设备和媒体类型上应用不同的样式。媒体查询支持多种特性,如视口尺寸、设备方向和分辨率,常用于响应式网页设计。文章详细阐述了not、only和and关键字的用途,并给出了多个针对不同屏幕尺寸应用样式的示例。
摘要由CSDN通过智能技术生成

CSS3 媒体类型

描述
all 用于所有媒体类型设备。
print 用于打印机。
screen 用于计算机屏幕、平板电脑、智能手机等等。
speech 用于大声“读出”页面的屏幕阅读器。

CSS @media 规则

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情,诸如:

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向(手机或平板电脑处于横屏还是竖屏模式?)
  • 分辨率

使用媒体查询是一种流行的技术,用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表(响应式网页设计)。

您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器(mediatype:print、screen 或 speech)。

除了媒体类型之外,还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性,为媒体查询提供了更多特定细节。例如,您可以将样式仅应用于大于或小于特定宽度的屏幕。

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
@media 21 9 3.5 4.0 9

CSS 语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not、only 和 and 关键字的含义:

not:not 关键字反正整个媒体查询的含义。

only:only 关键字可防止旧版浏览器应用指定的样式,这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。

and:and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是,如果使用 not 或 only,则还必须指定媒体类型。

您还可以针对不同的媒体使用不同的样式表,就像这样:

<link rel="stylesheet" media&#
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fullstack_lth

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值