译自：codecademy

Responsive Web Design

因为用户可能在任何尺寸的设备上浏览网页，it’s important for websites to resize and reorganize their content to best fit screens of all sizes.

When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.

Media Queries

通过 media queries ，CSS可以调整其content以适应不同屏幕尺寸。CSS可识别当前屏幕大小，然后依据屏幕的 width 应用不同的CSS样式。

上例表示，当屏幕宽度小于480px时，body元素内的text的字体大小为12px。

Range

上例表示，当屏幕尺寸在320px~480px之间时，下方CSS rules 将生效。注意第二个and，它将两个尺寸链接起来。

上例也可以用 two separate rules 来表示：

当屏幕尺寸大于等于320px时，第一个media query生效；当屏幕尺寸大于等于480px时，第二个media query生效，同时也意味着覆盖在第一个 media query 中出现的 CSS rules ，或应用新增的 CSS rules （在第一个media query没出现过的）。

Dots Per Inch (DPI)

有时候，为避免用户分辨率过大的图片，只有当用户使用高分辨率设备时，我们才给其提供higher quality media (images, video, etc.)。

我们可以通过 min-resolution 和 max-resolution 识别屏幕分辨率，来执行某些CSS rules。

上例中，当分辨率达到300dpi以上时，我们才展示 high resolution images and other media.

And Operator

在之前的例子中，and用来连接min-width 和 max-width，来表示视窗范围。同样，and也可用来连接 multiple media features.

上例中，屏幕必须符合 and连接的两个 media features ，下方CSS才生效。

Comma Separated List

若需多个条件中其中任意一条被满足（one of multiple media features），则执行某些CSS，则需逗号将条件分隔。

如需满足其中任意一项：

The screen is more than 480 pixels wide

The screen is in landscape mode

上例中，两个features任意一项满足（逗号隔开），则执行下方CSS。

其中 the second media feature is orientation。当屏幕width>height，orientation为landscape（横向）；当width

Breakpoints

不常用，先不译了

Review: Media Queries

When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.

You can write media queries to help with different screen sizes.

Media queries require media features. Media features are the conditions that must be met to render the CSS within a media query.

Media features can detect many aspects of a user’s browser, including the screen’s width, height, resolution, orientation, and more.

The and operator requires multiple media features to be true at once.

A comma separated list of media features only requires one media feature to be true for the code within to be applied.

The best practice for identifying where media queries should be set is by resizing the browser to determine where the content naturally breaks. Natural breakpoints are found by resizing the browser.

「译」CSS 媒体查询 Media Queries