更改CSS仅适用于移动设备?

Jan*_*Jan 5 html css mobile web

我刚完成网站的创建,但是现在发现失败了。我的问题是我的网站在PC上看起来非常漂亮。但是如果我从手机上看,某些图像之间的间隔等太多了……

所以我的问题是,如何创建一些只影响移动设备甚至平板电脑的CSS代码?

有办法吗?

Eya*_*hen 8

CSS具有称为媒体查询的功能。从MDN链接:

在CSS3中添加的媒体查询使内容的呈现适合特定范围的输出设备,而不必更改内容本身

例如:

div {
    background: black;
}

@media (max-width: 1000px) {

      div {
            background: yellow;
       }

}
Run Code Online (Sandbox Code Playgroud)

像所提供的示例一样,此div的背景颜色在屏幕上1000px宽度以下将为黄色。


小智 2

阅读并理解媒体查询

您将能够调整网站某些媒体尺寸的 CSS。