如何正确使用媒体查询（css）？ [关闭]

Posted 2023-03-12

【中文标题】如何正确使用媒体查询（css）？ [关闭]

【英文标题】：How to use media queries (css) properly? [closed]

【发布时间】：2012-02-22 05:15:58

【问题描述】：

您好，我在网站上工作了一段时间。 （我是 html/css 的新手）我即将发布，但我的网站在较小的屏幕分辨率上看起来很糟糕，而且我一直很难学习媒体查询并实现它们。假设我想用它使 div 标签在 1024 X 768 时缩小 50%，我必须应用哪些不同的属性以及我将使用哪些媒体查询？非常感谢您的帮助

【参考方案1】：

@media screen and (max-width: 1024px)
     div  width: 50%;

假设您的div 通常是100%。如果是960px。制作width: 480px等

这可能就是你想要的。您还可以指定height、aspect-ratio、orientation 等，但max-width 完成了很多工作而不会太具体。如果您想深入了解，这里是spec。

这是一个有效的example。

【讨论】：

哪个版本？当您将浏览器窗口的大小调整为小于我提供的示例时，div 最终不会缩小，background 不会变灰？

好吧，我用的是 safari 5.1.2，我不知道有多长，你想设置索引和样式 2

我认为如果您创建 reduced test case 会更有效率，因此我们可以解决为什么简单的媒体查询不适合您。

这会是个问题，因为我正在尝试调整图像大小