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

Posted 2023-03-31

【中文标题】仅为移动设备更改 CSS？ [复制]

【英文标题】：Change CSS only for mobile devices? [duplicate]

【发布时间】：2017-03-03 18:28:52

【问题描述】：

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

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

有办法吗？

【问题讨论】：

你可以用@media写css来只应用于某些屏幕分辨率

是的。您正在寻找Media Queries

【参考方案1】：

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

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

例如：

div 
    background: black;


@media (max-width: 1000px) 

      div 
            background: yellow;
       

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

【讨论】：

也许1000px 的宽度比 600 更适合区分移动设备和桌面设备。

【参考方案2】：

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

#image img 
    width:375px;

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

【讨论】：

如果提供更多信息，这个答案会更有帮助（并且得分更高）。你能再解释一下吗？哪个是哪个？有相关链接吗？谢谢！ (How to Answer)

【参考方案3】：

阅读并了解Media Queries

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