媒体查询CSS教程–标准分辨率,CSS断点和目标电话大小

过去,建立网站要简单得多。如今,网站的布局不仅应适应计算机,而且还应适应平板电脑,移动设备甚至电视。

使网站的布局适应性强称为响应式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

发表评论

登录后才能评论