仅为移动设备更改 CSS？ [复制]答案

【问题标题】：Change CSS only for mobile devices? [duplicate]仅为移动设备更改 CSS？ [复制]
【发布时间】：2017-03-03 18:28:52
【问题描述】：

我刚刚创建了我的网站，但现在我发现失败了。我的问题是我的网站在 PC 上看起来非常好。但是如果我用手机去看的话，某些图像之间的空间等等。太多了……

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

有办法吗？

【问题讨论】：

【解决方案1】：

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

在 CSS3 中添加的媒体查询让内容的呈现方式可以针对特定范围的输出设备进行定制，而无需更改内容本身

例如：

div {
    background: black;
}

@media (max-width: 1000px) {

      div {
            background: yellow;
       }

}

这个 div 的背景颜色将在屏幕上低于 1000 像素的宽度为黄色，如提供的示例所示。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

阅读并了解Media Queries

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

【讨论】：