我在 Wordpress 的 21 主题样式表中找到了以下代码行。
这是什么意思?
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
我在 Wordpress 的 21 主题样式表中找到了以下代码行。
这是什么意思?
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
它被称为CSS3 媒体查询,这是一种帮助您的网站适应各种屏幕尺寸的技术,或者基本上,它有助于为不同的设备提供不同的样式。
由于您是新手,让我们将您的媒体查询分为两部分:
@media only screen
这意味着我们将 css 样式应用于带有屏幕的设备。此处使用的关键字only
用于隐藏旧浏览器的样式表,使其无法看到手机样式表。
and (min-device-width: 320px) and (max-device-width: 480px)
这很明显,因为这意味着指定的 css仅在设备具有最小320px
和最大480px
宽度尺寸的屏幕尺寸时应用。
让我们一步一步理解代码的含义:
你的代码是:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
@media规则用于为不同的媒体类型/设备定义不同的样式规则。
唯一的关键字阻止不支持具有媒体功能的媒体查询的旧浏览器应用给定的样式。它对现代浏览器没有影响。
要将样式限制为具有屏幕且最小和最大宽度已知的设备,您可以将媒体功能链接到屏幕媒体类型:
screen and (min-device-width: 320px) and (max-device-width: 480px)
如需进一步指导,您可以点击此处查看 MDN 网站