这意味着@media only屏幕和（min-device-width：320px）和（max-device-width：480px）

Question

这在Wordpress Twenty Eleven主题css文件中意味着什么。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

Answer 1

它被称为CSS3 Media Queries这是一种技术，可以帮助您的网站适应各种屏幕尺寸，或者基本上，它有助于为不同的设备提供不同的风格。

由于您是新手，我们将您的媒体查询细分为两部分：

@media only screen

这意味着我们会将css样式应用于带屏幕的设备。此处使用关键字only来隐藏旧浏览器中的样式表，以查看电话样式表。

and (min-device-width: 320px) and (max-device-width: 480px)

这很明显，因为这意味着当设备的屏幕尺寸在宽度尺寸上最小320px且最大480px时，应用指定的css 。

Answer 2

让我们一步一步地理解代码的含义：

你的代码是：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

@media 规则用于为不同的媒体类型/设备定义不同的样式规则。

only 关键字可阻止不支持具有媒体功能的媒体查询的旧浏览器应用给定样式。它对现代浏览器没有影响。

要将样式限制为具有屏幕且已知最小和最大宽度的设备，您可以将媒体功能链接到屏幕媒体类型：

screen and (min-device-width: 320px) and (max-device-width: 480px)

如需进一步指导，请查看MDN website by clicking here