css中的媒体查询_CSS中的媒体查询

css中的媒体查询

CSS | 媒体查询 (CSS | Media Queries)

Creating a web page is not an easy task as it requires loads of content and data so that it becomes strongly responsive to the users. To do that various contents are even added e.g.: resources, informative content, blogs, line of codes, etc. but most importantly the factor that attracts users to any web page is media.

创建网页不是一件容易的事，因为它需要加载内容和数据，以使其对用户产生强烈的响应。为此，甚至添加了各种内容，例如：资源，信息内容，博客，代码行等，但最重要的是，吸引用户访问任何网页的因素是媒体。

Trivia:

琐事：

On that note let us talk about media queries. Media queries are the tools to implement media on your web page. For example, the @media rule which was introduced in CSS2 helped in making it possible to define style rules for different media types.

关于这一点，让我们谈谈媒体查询。 媒体查询是在网页上实现媒体的工具 。例如，CSS2中引入的@media规则有助于为不同的媒体类型定义样式规则。

But CSS2's idea did not get much support as it got obsolete. So CSS3 came into play by extending the CSS2 media type ideas. In this idea, they did not focus on the type of device but its capability.

但是CSS2的想法由于已经过时而没有得到太多的支持。因此，CSS3通过扩展CSS2媒体类型概念而发挥作用。在这种想法下，他们并不关注设备的类型，而是关注其功能。

Purpose:

目的：

Media Queries are used to check many things also,

媒体查询还用于检查许多内容，

Width as well as the height of the viewport
视口的宽度和高度
Width and height of the device as well orientation (whether the tablet/phone is in landscape or portrait mode?)
设备的宽度和高度以及方向(平板电脑/手机处于横向还是纵向模式？)
Resolution of the device
设备分辨率

In fact, using media queries is a great practice in order to deliver tailored style desktops, laptops, phones, etc.

实际上，使用媒体查询是提供定制样式的台式机，笔记本电脑，电话等的好习惯。

Media Queries come in with a media type and can have one or more expressions like true or false.

媒体查询带有一种媒体类型，可以有一个或多个表达式，如true或false。

Ways to implement:

实施方式：

There are various ways to implement Media Queries,

有多种方法可以实施媒体查询，

One way is to have a backup CSS section right underneath your style sheet.

一种方法是在样式表的下面有一个备用CSS部分。

So if someone wishes to include Media type files into your web page then one must opt for Media Queries.

因此，如果有人希望将媒体类型文件包含在您的网页中，则必须选择“媒体查询”。

It is an enhanced version of @media that was earlier used in CSS2. So this property might come in handy to one and all who wish to create responsive and presentable web pages.

它是CSS2之前使用的@media的增强版本。因此，此属性可能对希望创建响应式和可呈现网页的所有人都派上用场。

No one wishes to stick to the olde tools for so long, so why not adapt to something better?

没有人愿意长期使用旧工具，为什么不适应更好的东西呢？

And, that better is Media Queries.

而且，更好的是媒体查询。

There are various CSS3 Media Types and with the help of the table mentioned below, it can be easily understood.

有多种CSS3媒体类型，借助下面提到的表格，可以很容易地理解它。

Syntax:

句法：

@media not | only mediatype and(expressions) {
//CSS CODE
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
@media screen and (min-width: 520px) {
body {
background-color: pink;
}
}
</style>
</head>
<body>
<p>Media query will only if the media type is screen and viewport is 520px wide or wider.</p>
</body>
</html>

Output

输出量

In the above example, the media type is screen and min width is 520px.

在上面的示例中，媒体类型为screen，最小宽度为520px 。

Other values,

其他值

Value	Description
all	It is for all media type devices
print	It is for printers
screen	It is for computer screens, tablets, smart-phones etc.
speech	It is for screen readers that "reads" the page out.

值	描述
所有	适用于所有媒体类型的设备
打印	适用于打印机
屏幕	它用于计算机屏幕，平板电脑，智能手机等。
言语	它是供屏幕阅读器“读取”页面的。