这行 CSS 是什么意思？@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16402870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
提问by user2322509
I found the following line of code inside Wordpress' Twenty Eleven theme stylesheet.
我在 Wordpress 的 21 个主题样式表中找到了以下代码行。
What does it mean?
这是什么意思？
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
回答by Eli
It's called CSS3 Media Querieswhich is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.
它被称为CSS3 媒体查询，它是一种帮助您的网站适应各种屏幕尺寸的技术，或者基本上，它有助于为不同的设备提供不同的样式。
Since you're new, let's break down your media query to two parts:
由于您是新手，让我们将您的媒体查询分解为两部分：
@media only screen
This means we will apply css styles to a device with a screen. The keyword onlyused here to hide style sheets from older browsers from seeing phone style sheet.
这意味着我们将 css 样式应用于带有屏幕的设备。only此处使用的关键字从旧浏览器中隐藏样式表，使其无法看到电话样式表。
and (min-device-width: 320px) and (max-device-width: 480px)
This is quite obvious since it means that the specified css onlyapplied when a device has a screen's size with minimum 320pxand maximum of 480pxin width dimension.
这很明显，因为这意味着指定的 css仅在设备的屏幕尺寸具有最小320px和最大480px宽度尺寸时才应用。
回答by AKNair
Let's understand the meaning of code step by step:
让我们一步一步地理解代码的含义：
You code was:
你的代码是：
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
The @mediarule is used to define different style rules for different media types/devices.
该@media规则是用来定义不同的媒体类型/设备的不同样式规则。
The onlykeyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
该唯一关键字，可避免旧的浏览器不支持与媒体功能媒体查询从应用给定的风格。它对现代浏览器没有影响。
To limit the styles to devices with a screenand whose min and max width is known, you can chain the media features to the screen media type:
要将样式限制为具有屏幕且其最小和最大宽度已知的设备，您可以将媒体功能链接到屏幕媒体类型：
screen and (min-device-width: 320px) and (max-device-width: 480px)
For further guidance you can check MDN website by clicking here
