0

我添加了@media screencss 以更改我的网站，但它似乎没有响应。我在 HTML 中添加了元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 错了吗？

  • 有没有办法专门摆脱#sidebarin @media screencss？

4

6 回答 6

1

试试这个（未测试）

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

 body {
    max-width: 800px;
  }

 #sidebar {
    width: 0;
 }

}
于 2013-03-07T03:53:17.100 回答
0

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

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

这样，样式表只会在需要时重新下载。

如果您没有 PHP，您可以在?ver=每次更改 CSS 文件时手动更改参数。

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

于 2013-03-07T03:53:31.903 回答
0

代码在我看来没问题。您是否尝试过硬刷新？

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

还要摆脱#sidebar

#sidebar{
    display:none;
}

当你点击你的@media 时会隐藏它。希望有帮助:)

于 2013-03-07T06:06:30.627 回答
0

@media 适用于一切。例如，我的手机的宽度为 720 像素。当您拥有 720 像素的 CSS @media for mobile 时；如果有意义，将应用以下 CSS。如果这是您想要实现的目标，则应该阅读移动优先响应式设计，但这是一个完全不同的主题。至于您@media 中的代码，您的目标是移动设备，而不是笔记本电脑/计算机。以防你不知道这一点。所以如果我想对了，CSS 将只适用于移动设备。对于笔记本电脑/个人电脑，@media (max-width: xxxpx) {} 会这样做:)

于 2013-03-08T02:01:14.117 回答
0

感谢 Akira Dawson 的展示部分。看来我需要去掉 content="width=1200" 才能在我的 iPhone 上正确显示。此外，我最终所做的是摆脱了@media 屏幕并将其更改为@media 手持设备，以便它在我的 iPhone 上生效。无论出于何种原因，@media screen 都不起作用。这很有趣，因为有人告诉我@media 手持设备不能在 iPhone 上工作，但显然可以。

于 2013-03-09T05:50:57.747 回答
0

据我了解，它content="width=1200说您的网站需要至少1200 像素的视口，这与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

于 2013-04-03T23:11:13.683 回答