Question

我添加了@media screen css以改变我的网站，但它似乎没有响应。我在HTML中添加了meta name = "viewport" content="width=1200, width=device-width"，这是唯一影响我的网站在手机上显示的方式。在CSS中我添加了以下内容，但它没有任何效果。

@media screen
and (max-device-width: 768px)
and (orientation: portrait) {
   body {
   max-width: 600px;
}
   #sidebar {
     width: 0;
   }
}

@media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
  body {
    max-width: 800px;
  }
    #sidebar {
        width: 0;
    }
}

那我该如何：

让这个工作，我的CSS错了吗？
有没有办法专门摆脱#sidebar css中的@media screen？

Answer 1

试试这个（未经测试）

@media handheld and (orientation: landscape), 
  screen and (max-width: 1000px) {

 body {
    max-width: 800px;
  }

 #sidebar {
    width: 0;
 }

}

Answer 2

您的手机可能会缓存旧版CSS文件（更改前）。如果你有PHP，一个很好的解决方法是：

<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">

这样，样式表只在需要时才重新加载。

如果您没有PHP，那么每次在CSS文件中进行更改时，您都可以随时手动更改?ver=参数。

这可能是也可能不是你的问题，我不知道。但它可能有所帮助。

Answer 3

代码看起来不错。你有没有尝试过刷新？

shft + f5我的经验修复了CSS，当你没有注意到设置应用。删除缓存也有帮助！

还要摆脱#sidebar

#sidebar{
    display:none;
}

当你点击@media时，

会隐藏它。希望有所帮助：）

Answer 4

@media适用于所有事情。例如，我的手机的宽度为720px。什么时候你有移动的@media @media 720px;如果有意义，将应用以下CSS。如果这是你想要实现的，那么应该阅读移动第一响应式设计，但这是一个完全不同的主题。至于@media中的代码，您的目标是移动设备，而不是笔记本电脑/计算机。如果你不知道这一点。所以，如果我正在思考，CSS将仅适用于移动设备。对于笔记本电脑/个人电脑，@ media（max-width：xxxpx）{}会这样做：）

Answer 5

感谢Akira Dawson的显示部分。看来我需要摆脱content =“width = 1200”才能在我的iPhone上正常显示。另外我最终做的是摆脱@media屏幕并将其更改为@media掌机，以使其在我的iPhone上生效。无论出于何种原因，@ media屏幕都无效。这很有意思，因为我被告知@media掌上电脑不适用于iPhone，但显然确实如此。

Answer 6

据我了解content="width=1200表示您的网站需要的视口至少 1200px，这与max-device-width: 768px相反

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />应该可以解决您的问题。

来源：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

@media screen css属性不起作用

6 个答案: