过去,建立网站要简单得多。如今,网站的布局不仅应适应计算机,而且还应适应平板电脑,移动设备甚至电视。
使网站的布局适应性强称为响应式Web设计。CSS Media Queries是响应式设计的最重要部分之一。在本文中,我们将仔细研究Media Queries以及如何在CSS中使用它们。
如果愿意,您可以观看下面的视频版本:
什么是媒体查询?
媒体查询是CSS3的一项功能,可使网页调整其布局以适应不同的屏幕尺寸和媒体类型。
句法
@media media type and (condition: breakpoint) { // CSS rules }
我们可以在各种条件下定位不同的媒体类型。如果条件和/或媒体类型满足,则将应用媒体查询中的规则,否则将不应用。
语法一开始可能看起来很复杂,所以让我们对每个部分进行详细说明…
@媒体规则
我们开始使用@media规则定义媒体查询,然后在花括号内包括CSS规则。@ media规则也用于指定目标媒体类型。
@media () { // CSS rules }
插入语
在括号内,我们设置了一个条件。例如,我想为移动设备应用更大的字体。为此,我们需要设置一个最大宽度来检查设备的宽度:
.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }
通常,文字大小为14像素。但是,由于我们应用了媒体查询,因此当设备的最大宽度为480px或更小时,它将变为16px。
重要提示:始终将媒体查询放在CSS文件的末尾。
媒体类型
如果我们不应用媒体类型,则@media规则默认选择所有类型的设备。否则,媒体类型必须紧跟@媒体规则之后。设备种类繁多,但我们可以将其分为4类:
- 全部-适用于所有媒体类型
- 打印—用于打印机
- 屏幕—用于计算机屏幕,平板电脑和智能手机
- 语音-适用于大声“阅读”页面的屏幕阅读器
例如,当我只想选择屏幕时,将在@ media规则之后设置screen关键字。我还必须使用“ and”关键字将规则连接起来:
@media screen and (max-width: 480px) {
.text {
font-size: 16px;
}
}
断点
断点可能是您会听到和使用的最常见的术语。断点是确定何时更改布局并在媒体查询中调整新规则的关键。让我们回到开头的示例:
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}
在这里,断点是480px。现在,媒体查询知道何时设置或覆盖新类。基本上,如果设备的宽度小于480px,则将应用文本类,否则,不会。
常见断点:是否有标准分辨率?
最常见的问题之一是“我应该使用哪个断点?”。市场上有大量的设备,因此我们不能也不应为每个设备定义固定的断点。
这就是为什么我们不能说设备有标准分辨率的原因,但是日常编程中有一些常用的断点。如果您使用的是CSS框架(如Bootstrap,Bulma等),则还可以使用它们的断点。
现在让我们看一下设备宽度的一些常见断点:
- 320像素— 480像素:移动设备
- 481px — 768px:iPad,平板电脑
- 769px — 1024px:小屏幕,笔记本电脑
- 1025像素— 1200像素:台式机,大屏幕
- 1201px及以上—超大屏幕电视
如上所述,这些断点可能会有所不同,没有确切定义的标准,但是这些是一些常用的断点。
包起来
响应式设计是当今Web设计和开发领域中必不可少的。媒体查询是构建响应式布局的最重要部分之一,我希望您发现我的帖子对理解媒体查询的工作方式有所帮助。
点击阅读原文
本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4250.html