本文共 4972 字,大约阅读时间需要 16 分钟。
css响应式媒体查询
In this post I’m going to first introduce media types and media feature descriptors, then I’ll explain media queries.
在这篇文章中,我将首先介绍媒体类型和媒体功能描述符,然后我将解释媒体查询。
Used in media queries and @import declarations, media types allow us to determine on which media a CSS file, or a piece of CSS, is loaded.
媒体类型用于媒体查询和@import声明中,使我们能够确定将CSS文件或一段CSS加载到哪种媒体上。
We have the following media types
我们有以下媒体类型
all
means all the media
all
意味着所有媒体
print
used when printing
print
使用的打印
screen
used when the page is presented on a screen
screen
页面时使用的屏幕
speech
used for screen readers
屏幕阅读器使用的speech
screen
is the default.
screen
是默认设置。
In the past we had more of them, but most are deprecated as they proven to not be an effective way of determining device needs.
过去,我们有更多此类设备,但由于已被证明不是确定设备需求的有效方法,因此大多数设备已弃用。
We can use them in @import statements like this:
我们可以在@import语句中使用它们,如下所示:
@import url(myfile.css) screen;@import url(myfile-print.css) print;
We can load a CSS file on multiple media types separating each with a comma:
我们可以在多个用逗号分隔的媒体类型上加载CSS文件:
@import url(myfile.css) screen, print;
The same works for the link
tag in HTML:
HTML中的link
标记也是如此:
We’re not limited to just using media types in the media
attribute and in the @import
declaration. There’s more
我们不仅限于在media
属性和@import
声明中使用媒体类型。 还有更多
First, let’s introduce media feature descriptors. They are additional keywords that we can add to the media
attribute of link
or to the @import
declaration, to express more conditionals over the loading of the CSS.
首先,让我们介绍媒体功能描述符 。 它们是我们可以添加到link
的media
属性或@import
声明中的其他关键字,以表示有关CSS加载的更多条件。
Here’s the list of them:
以下是它们的列表:
width
width
height
height
device-width
device-width
device-height
device-height
aspect-ratio
aspect-ratio
device-aspect-ratio
device-aspect-ratio
color
color
color-index
color-index
monochrome
monochrome
resolution
resolution
orientation
orientation
scan
scan
grid
grid
Each of them have a corresponding min-* and max-*, for example:
它们每个都有对应的min- *和max- *,例如:
min-width
, max-width
min-width
, max-width
min-device-width
, max-device-width
min-device-width
, max-device-width
and so on.
等等。
Some of those accept a length value which can be expressed in px
or rem
or any length value. It’s the case of width
, height
, device-width
, device-height
.
其中一些接受长度值,可以用px
或rem
表示,也可以是任何长度值。 是width
, height
, device-width
, device-height
。
For example:
例如:
@import url(myfile.css) screen and (max-width: 800px);
Notice that we wrap each block using media feature descriptors in parentheses.
请注意,我们在括号中使用媒体特征描述符包装了每个块。
Some accept a fixed value. orientation
, used to detect the device orientation, accepts portrait
or landscape
.
有些接受固定值。 orientation
,用于检测设备的方向,接受portrait
或landscape
。
Example:
例:
scan
, used to determine the type of screen, accepts progressive
(for modern displays) or interlace
(for older CRT devices)
scan
(用于确定屏幕类型)接受progressive
(对于现代显示器)或interlace
(对于较旧的CRT设备)
Some others want an integer.
其他一些想要整数。
Like color
which inspects the number of bits per color component used by the device. Very low-level, but you just need to know it’s there for your usage (like grid
, color-index
, monochrome
).
类似于color
,它检查设备使用的每个颜色分量的位数。 级别很低,但是您只需要知道它的使用位置即可(例如grid
, color-index
, monochrome
)。
aspect-ratio
and device-aspect-ratio
accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.
aspect-ratio
和device-aspect-ratio
接受表示宽度与高度视口比率的比率值,该比率值表示为分数。
Example:
例:
@import url(myfile.css) screen and (aspect-ratio: 4/3);
resolution
represents the pixel density of the device, expressed in a like dpi
.
resolution
表示设备的像素密度,以如dpi
。
Example:
例:
@import url(myfile.css) screen and (min-resolution: 100dpi);
We can combine rules using and
:
我们可以使用and
组合规则:
We can perform an “or” type of logic operation using commas, which combines multiple media queries:
我们可以使用逗号执行“或”类型的逻辑运算,该运算结合了多个媒体查询:
@import url(myfile.css) screen, print;
We can use not
to negate a media query:
我们可以使用not
否定媒体查询:
@import url(myfile.css) not screen;
Important:
not
can only be used to negate an entire media query, so it must be placed at the beginning of it (or after a comma)重要提示:
not
只能用来否定整个媒体查询,所以它必须被放置在它的开始(或逗号之后)
All those above rules we saw applied to @import or to the link
HTML tag can be applied inside the CSS, too.
我们在@import或link
HTML标签上看到的所有上述规则也可以在CSS内应用。
You need to wrap them in a @media () {}
structure.
您需要将它们包装在@media () {}
结构中。
Example:
例:
@media screen and (max-width: 800px) { /* enter some CSS */}
and this is the foundation for responsive design.
这是响应式设计的基础。
Media queries can be quite complex. This example applies the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is landscape:
媒体查询可能非常复杂。 本示例仅在屏幕设备,宽度在600到800像素之间且方向为横向的情况下才应用CSS:
@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) { /* enter some CSS */}
翻译自:
css响应式媒体查询
转载地址:http://glqgb.baihongyu.com/