@media for mobile - CSS

CSS @media规则用于指定根据不同设备或屏幕尺寸应用不同的CSS样式。

在移动设备和响应式设计中，@media查询是不可或缺的，因为它可以帮助我们针对移动设备做出一些样式调整。

响应式布局

响应式布局是一种基于CSS3媒体查询的设计方法，它可以在不同的屏幕上呈现出不同的布局。它可以让我们设计出适用于各种显示设备的网站，包括桌面、平板电脑和手机。

如何使用@media查询

@media规则是在样式表中嵌套的块元素，可以设置不同的样式属性来显示不同的布局。

/* 对于小于等于600像素宽度的设备，应用以下样式 */
@media only screen and (max-width: 600px) {
    body {
        background-color: yellow;
    }
}

在上面的示例中，我们使用@media查询指定了一个仅在小于等于600像素宽度的设备上应用的样式。当设备的屏幕宽度超过600像素时，这段样式将被忽略。

常见的@media查询

以下是一些在移动设备上常用的@media查询示例。

• 小屏幕

@media only screen and (max-width: 480px) {

}

• 中屏幕

@media only screen and (min-width: 481px) and (max-width: 768px) {

}

• 大屏幕

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  
}

• 超大屏幕

@media only screen and (min-width: 1025px) {

}

总结

@meida查询是一种非常有用的工具，可以帮助我们创建针对不同设备的网站。这篇文章提到了一些用于移动设备的@media查询。我们希望这些示例可以在你的下一个项目中为你节省时间并提高效率。