css - 这行 CSS 是什么意思？ @media only screen and (min-device-width : 320px) and (max-device-width: 480px)

Question

我在 Wordpress 的二十一主题样式表中找到了以下代码行。

这是什么意思？

@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)

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