仅为移动设备更改CSS？

Question

我刚刚创建了我的网站，但现在我发现了一个失败。我的问题是我的网站在PC上看起来很不错。但是，如果我从手机上看一下，某些图像之间的空间等太多了......

所以我的问题是，如何创建一些仅影响移动设备和平板电脑的CSS代码？

有办法吗？

Answer 1

CSS具有名为media queries的功能。 来自MDN链接：

  

CSS3中添加的媒体查询，可以根据特定范围的输出设备定制内容，而无需更改内容本身

例如：

div {
    background: black;
}

@media (max-width: 1000px) {

      div {
            background: yellow;
       }

}

此div的背景颜色在屏幕上为黄色，宽度为600px。

Answer 2

您可以将媒体查询用于不同的屏幕分辨率。 示例 -

#image img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #image img {width:375px;}
}

Answer 3

阅读并理解Media Queries

您可以调整网站某些媒体尺寸的CSS。