css媒体查询的区间_CSS媒体查询

最新推荐文章于 2024-07-21 23:31:42 发布

cungui5726

最新推荐文章于 2024-07-21 23:31:42 发布

阅读量1.3k

点赞数

文章标签： css python java html css3

原文链接：https://thenewcode.com/154/CSS-media-queries

版权

css媒体查询的区间

At-media queries are conditions in your stylesheet. The style rules they contain are applied only if certain criteria are met, such as device width, resolution, or browser window dimensions.

媒体查询是样式表中的条件 。 仅当满足某些条件 (例如设备宽度，分辨率或浏览器窗口尺寸)时，才会应用它们包含的样式规则。

Media queries can be written inside a stylesheet, or may be the conditions for using the CSS in an external stylesheet. We‘ll start by exploring the first, and most common, application.

媒体查询可以写在样式表中，也可以是在外部样式表中使用CSS的条件。我们将从探索第一个也是最常见的应用程序开始。

@媒体规则 (@media rules)

Most stylesheets begin with fundamental declarations that are true in all conditions:

大多数样式表都以在所有情况下都适用的 基本声明开头：

@charset utf-8
@font-face {
	font-family: 'Mallory';
	src: url('Mallory-Light.woff2') format('woff2');
	font-style: normal;
	font-weight: 300;
}
* { 
    box-sizing: border-box;
}
body {
	font-family: Mallory, Gill Sans, sans-serif;
    background: hsl(240, 67%, 94%);
    color: black;
}

Note that our stylesheet uses @ rules to set the character encoding and embed a font. There are many uses for the @ symbol in CSS, including keyframe animations and @supports; the character is not specific to media queries.

请注意，我们的样式表使用@规则来设置字符编码并嵌入字体。 CSS中@符号有很多用途，包括关键帧动画和@supports ；该字符不特定于媒体查询。

Working from this stylesheet, let‘s say we wanted to improve text contrast at smaller window sizes. We could add an @media rule to cover this condition by adding the following:

假设使用此样式表工作，我们希望在较小的窗口尺寸下改善文本对比度。我们可以通过添加以下内容来添加@media规则来满足此条件：

@media all and (max-width: 600px) {
    body {
        background: #000;
        color: #fff;
    }
}

If you test the resulting page, you‘ll see the background and text color change when the browser window narrows to 600px wide or less.

如果测试结果页面，则当浏览器窗口缩小到600px或更小时，您会看到背景和文本颜色发生变化。

There are a few important things to note at this stage:

在此阶段需要注意一些重要事项：

@media rules work in addition to other aspects of responsive design, including fluid images.
@media规则除了响应式设计的其他方面(包括流畅的图像)之外，还可以工作。
The declarations inside the @media rule contain only the things that are altered if the conditions are met. Do not attempt to rewrite the entire stylesheet inside an @media rule. Only the things that change are added; the base rules that are not affected by the new declarations will still apply under the new conditions.
@media规则中的声明仅包含满足条件的更改内容 。不要试图重写的整个内部样式表@media规则。仅添加更改的内容；不受新声明影响的基本规则仍将在新条件下适用。
The @media rule uses curly braces to contain the declarations. You can have as many declarations inside the @media rule as you like. You can also have as many @media rules as you wish, although obviously the more you add, the more complex your CSS becomes.
@media规则使用大括号包含声明。您可以根据需要在@media规则中包含任意多个声明。您也可以根据需要设置@media规则，尽管显然添加的规则越多，CSS越复杂。
In general practice you should usually write your base CSS first in your stylesheet, i.e. the styles that will remain the same under all (or most) conditions, adding the @media rules at the end.
在一般的做法你通常应该先写你的基地在CSS样式表 ，即会保持所有(或大部分)条件下，相同的样式，添加@media规则在最后。

Due to the slightly more complex syntax of @media queries, it makes sense to test that they work first with something dramatic like a background color change, especially when you are just beginning to learn and apply them.

由于@media查询的语法稍微复杂一些，因此有必要测试它们是否首先在诸如背景颜色变化的戏剧性效果下工作，特别是在您刚开始学习和应用它们时。

句法 (Syntax)

The first part of the @media rule above – the all – states what kind of media the rule is applied to. all means exactly that: the declarations will be valid for every form of media, provided the condition (and (max-width: 600px)) is met.

上面@media规则的第一部分- all -说明该规则适用于哪种媒体 。 all完全意味着：只要满足条件( and (max-width: 600px) )，声明对于每种形式的媒体都是有效的。

Associating conditions with an @media rule is optional. How a web page will be printed out is often specified in a rule like this, without any further conditions:

将条件与@media规则关联是可选的。通常在这样的规则中指定如何打印网页，而没有任何其他条件：

@media print {
    /* rules for a print stylesheet here */
}

Technically, you could write your entire stylesheet inside an @media all { } rule, although that would be entirely redundant. @media { } would work too, since the lack of a media condition assumes all.

从技术上讲，您可以在@media all { }规则内编写整个样式表，尽管那完全是多余的。 @media { }也可以工作，因为缺少媒体条件会假设all 。

Other options for @media include screen (intended for color screens) and speech for speech synthesisers).

对于其他选项@media包括screen (用于彩色显示屏)以及speech语音合成器)。

最小宽度和最大宽度 (min-width and max-width)

The two most common conditions associated with all or screen are and (min-width: x) and and (max-width: x). Both measure the browser viewport width, and are usually the most straightforward way of determining it‘s size.

与all或screen相关的两个最常见的条件是and (min-width: x)和and (max-width: x) 。两者都测量浏览器视口的宽度，并且通常是确定其大小的最直接的方法。

It‘s easy to get min-width and max-width confused; thankfully, there‘s also an easy way to remember which is which.

min-width和max-width容易混淆；值得庆幸的是，还有一种简单的方法可以记住哪个。

min-width means “the browser window must be at least this width or greater”
min-width表示“浏览器窗口必须至少等于或大于此宽度 ”
max-width means “the browser can be up to this width or smaller”
max-width表示“ 浏览器可以达到此宽度或更小 ”

You‘ll typically use one or the other in your stylesheet; it‘s rare (and usually confusing) to use both. Which one you use comes down to your design approach:

通常，您将在样式表中使用一个或另一个。很少同时使用这两种方法(通常会造成混淆)。您使用哪一种取决于您的设计方法：

if you are using a mobile-first approach, then you are writing your base CSS for the smallest browser width, and adding adjustments to it as the browser widens with @media all and (min-width: x) { }.
如果您使用的是移动第一种方法，那么你正在写的最小的浏览器的宽度你的基地CSS，并加入调整它作为浏览器扩大@media all and (min-width: x) { }
if you take a desktop-first approach, then you are writing your CSS for what appears on your monitor and adjusting it as the browser narrows using @media all and (max-width: x) { }.
如果您采用桌面优先的方法，那么您将使用监视器上显示的内容编写CSS，并使用@media all and (max-width: x) { }在浏览器缩小时对其进行调整。

单位 (Units)

Technically, the measurement defined for min-width and max-width can use almost any CSS length unit, with the exception of vw, vh, vmin or vmax. Using pixels is common, but comes with some caveats:

从技术上讲，为min-width和max-width定义的度量可以使用几乎任何CSS长度单位，但vw ， vh ， vmin或vmax除外。使用像素很常见，但有一些警告：

Pixels are not what you think they are in CSS. For example, the resolution for the product specs of the iPhone are not a direct part of the calculations for min-width and max-width.
像素不是您认为CSS中的像素 。例如，iPhone产品规格的分辨率不是min-width和max-width的直接计算部分。
It‘s best to ignore device sizes. People tend to become obsessed with the exact pixel dimensions of the browser in the iPhone XIII, or whatever their mobile device is. That is a fool‘s errand: you‘ll constantly be chasing new mobile releases to update your stylesheet, and inevitably ignore other devices. Instead, write @media rules as interventions where the design of your site needs them. By making the browser window wider or narrower, you can find where your particular design “breaks”, and intervene at that point, an approach that will work for every device.
最好忽略设备尺寸 。人们趋向于迷恋iPhone XIII或任何移动设备中的浏览器的确切像素尺寸。这是一个愚蠢的事情：您将不断追随新的移动版本来更新样式表，并且不可避免地会忽略其他设备。而是将@media规则编写为网站设计需要它们的干预 。通过使浏览器窗口变宽或变窄，您可以找到特定设计的“中断”位置，并在此进行干预，该方法将适用于所有设备。

组合器 (combinators)

You‘ve already seen one combinator in an @media query: and. It‘s also possible to use not and only and a comma delimiter:

您已经在@media查询中看到一个组合器： and 。它也可以使用not和only和逗号分隔符：

@media only screen {
    …
}

Or:

要么：

@media screen, print {
    …
}

You can use and and or as many times as you wish to chain together conditions:

您可以使用and和or任意多次将条件链接在一起：

@media screen and (max-width: 600px) 
    and (min-resolution: 200dpi) {
        …
}

There are many conditions that can be added in an @media query, but it is always recommended to start with the basics first.

@media查询中可以添加许多条件，但是始终建议首先从基础开始。

变化 (Variations)

As mentioned at the start of this article, it‘s also possible to write media queries inside link elements:

如本文开头所述，还可以在link元素中编写媒体查询：

<link rel="stylesheet" href="styles_h.css"
    media="only screen and (max-width: 480px)">

Contrary to expectations, media conditions do not prevent the browser from loading the stylesheet. The browser loads the file regardless, but it does not use the CSS in the stylesheet unless it matches the associated conditions.

与预期相反， media条件不会阻止浏览器加载样式表。浏览器无论如何都会加载文件，但是除非符合相关条件，否则它将不使用样式表中CSS。

条件，局限性和结论 (Conditions, Limitations and Conclusions)

As powerful as they are, @media queries do have a few limitations that you should be aware of:

@media查询功能强大，但确实有一些限制，您应该注意以下几点：

Currently @media inspects conditions in the browser viewport and device, not the state of individual elements. So-called “element queries” are planned for CSS; right now, a JavaScript polyfill is recommended to create the functionality.
当前，@ @media检查浏览器视口和设备中的条件， 而不是单个元素的状态。所谓的“元素查询” 计划于CSS; 现在，建议使用JavaScript polyfill创建功能。
@media queries can‘t use CSS variables in their conditions, nor can they be nested inside elements. If you want those kinds of features, use Sass or another CSS pre-processor.
@media查询不能在其条件下使用CSS变量，也不能嵌套在元素内。如果需要这些功能，请使用Sass或其他CSS预处理器。