仅针对移动设备更改CSS

Question

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

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

有办法吗？

Answer 1

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

在CSS3中添加的媒体查询，让内容的呈现适用于特定的输出设备范围，而无需更改内容本身

例如：

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

此Div的背景颜色将在1000px宽度下的屏幕上为黄色，如提供的示例。

Answer 2

您可以将媒体征服用于不同的屏幕分辨率。示例：

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

Answer 3

阅读并了解媒体查询

您将能够调整网站的某些媒体大小的CSS。