只针对移动设备修改CSS？

Question

我刚刚完成了创建我的网站，但现在我发现了一个问题。我的问题是当我在电脑上查看时，我的网站看起来非常好。但是如果我从我的手机上查看它，某些图片之间的间距等等就太大了...

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

有方法吗？

- Jan

---

你可以使用 @media 来编写 CSS，以仅在某些屏幕分辨率上应用。 - Masoud

是的。你正在寻找媒体查询。 - Leon Freire

Answer 1

CSS具有名为媒体查询的功能。 来自MDN链接:

在CSS3中添加了媒体查询功能，它可以根据特定范围的输出设备自定义内容的展示方式，而无需更改内容本身。

例如：

div {
    background: black;
}

@media (max-width: 1000px) {
    div {
        background: yellow;
    }
}

在屏幕宽度小于1000像素的情况下，此div的背景颜色将变为黄色，就像提供的示例一样。

- Eyal Cohen

---

或许使用比600更宽的1000px会更好，以区分移动和桌面设备。 - ashleedawg

Answer 2

您可以使用媒体查询来适应不同的屏幕分辨率。 例如：

#image img {
    width:375px;
}

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

- Purvil Bambharolia

---

这个回答如果能提供更多信息的话会更有帮助（并且得分更高）。你能再解释一下吗？哪个是哪个？有相关链接吗？谢谢！（[回答]） - ashleedawg

Answer 3

了解并掌握媒体查询，可以帮助您调整网站在不同媒体尺寸下的CSS样式。

- Joseph Vu