在styles.css中,我使用的是媒体查询,这两种查询都使用以下变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时,网站会调整到我想要在常规浏览器(Safari,Firefox)中的布局,然而,手机布局根本不会在手机上显示。相反,我只看到默认的CSS。
有谁能给我指个方向吗?
发布于 2011-10-22 23:58:55
这三个都是有用的提示,但看起来我需要添加一个meta标签:
<meta content="width=device-width, initial-scale=1" name="viewport" />
现在它似乎在Android (2.2)和iPhone上都可以工作了。
发布于 2011-10-22 20:30:12
我怀疑关键字only
可能是这里的问题所在。我使用这样的媒体查询没有问题:
@media screen and (max-width: 480px) { }
发布于 2013-08-31 18:58:13
我在一个新闻网站上使用了bootstrap,但它在IE8上不起作用,我使用了css3-mediaqueries.js javascript,但仍然不起作用。如果希望媒体查询与此javascript文件一起使用,请在css中将屏幕添加到媒体查询行
下面是一个示例:
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (max-width:900px) {}
@media screen and (min-width:900px) and (max-width:1200px) {}
@media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
css链接行和上面的行一样简单。
https://stackoverflow.com/questions/7859336
复制相似问题