@media屏幕CSS属性不起作用

我加了@media screen css努力改变我的网站，但它似乎并没有回应。我在HTML中添加了meta name = "viewport" content="width=1200, width=device-width"，这是唯一影响我的网站在手机上显示的方式。在CSS中，我添加了以下内容，但它没有效果。@media屏幕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在@media screen css？

来源

2013-03-07 London804

'display：none;'优于'width：0;'。但是你的代码仍然应该工作。 – stackunderflow 2013-03-07 03:51:27

你能给你一个你试过的网站的链接吗？ – Michel 2013-03-07 06:12:33

试试这个（未测试）

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

body { 
    max-width: 800px; 
    } 

#sidebar { 
    width: 0; 
} 

}

来源

2013-03-07 03:53:17 iConnor

没有没有工作的任何其他建议？ – London804 2013-03-07 05:06:38

以及它应该工作所以无论什么不对别的地方，或者尝试使用EM的和做提琴 – iConnor 2013-03-07 06:01:24

那么是什么原因呢？ – iConnor 2013-03-16 14:01:31

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

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

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

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

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

来源

2013-03-07 03:53:31 stackunderflow

不，我删除了Safari浏览器上的cookies和历史记录，也尝试过在我父亲的网站上。 CSS是正确的，但对吗？ – London804 2013-03-07 04:54:48

是的，我是这么认为的......它的缓存你会想删除，而不是cookies和历史记录。 – stackunderflow 2013-03-07 04:58:55

是啊，这样做没有运气 – London804 2013-03-07 05:18:34

代码看起来没问题。你有尝试过硬刷新吗？

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

也摆脱#sidebar

#sidebar{ 
    display:none; 
}

将其隐藏，当你打你的@media。希望可以帮到:)

来源

2013-03-07 06:06:30

是啊，我删除了我的手机和电脑上我的缓存，它似乎没有效果。感谢#sidebar位，我还有其他地方，在我的代码中，我本应该把它放在那里。在我的html中还有什么我需要添加的吗？ – London804 2013-03-07 19:11:22

我改变了边栏位，并摆脱了它。谢谢你在我的代码其他地方很有趣我做到了，但完全忘记了这里。 – London804 2013-03-07 19:35:52

看来，我需要摆脱content =“width = 1200”。在Chrome移动设备上，Safari移动设备实现了所需的宽度，但这并不完美，但现在足够好了。我会继续鼓捣它。 @media屏幕是不是假设在笔记本电脑和个人电脑上工作呢？ – London804 2013-03-07 19:42:10

@media对一切都适用。例如我的手机的宽度为720像素，例如。当你有720px的移动CSS @media;如果有意义的话，下面的CSS将被应用。应该阅读移动第一响应式设计，如果这是你想要实现的，但这是一个完全不同的话题。至于@media中的代码，您的目标是移动设备，而不是笔记本电脑/电脑。 Incase你不知道这一点。所以如果我认为正确的话，CSS将仅适用于移动设备。对于笔记本电脑/ pc，@media（max-width：xxxpx）{}会这样做:)

来源

2013-03-08 02:01:14

谢谢Akira Dawson的显示部分。看来我需要摆脱content =“width = 1200”才能在我的iPhone上正确显示。此外，我最终做的是摆脱@media屏幕，并将其更改为@media手持设备，以便在我的iPhone上生效。无论什么原因，@media屏幕将无法使用。这很有趣，因为我被告知@media掌上电脑在iPhone上不起作用，但显然它确实如此。

来源

2013-03-09 05:50:57 London804

据我了解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-03 23:11:13 Dirk

@media屏幕CSS属性不起作用

回答

相关问题