在样式。css中，我使用媒体查询，这两者都使用的变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时，网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局，然而，手机上根本不会显示移动布局。相反，我只看到默认的CSS。
有人能告诉我正确的方向吗?
当前回答
我在一个新闻网站上使用bootstrap，但它在IE8上不起作用，我使用css3-mediaqueries.js javascript，但仍然不起作用。如果你想让你的媒体查询与这个javascript文件一起工作，在CSS中添加screen到你的媒体查询行
这里有一个例子:
<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链接行简单如上行。
其他回答
又给了我一个答案。如果你试图使用CSS变量，那么它会悄悄地失败。
@media screen and (max-device-width: var(--breakpoint-small)) {}
CSS变量在媒体查询中不起作用(根据设计)。
今天我也遇到了类似的情况。媒体查询无法工作。过了一会儿，我发现“and”后面的空格不见了。 正确的媒体查询应该是这样的:
@media screen and (max-width: 1024px) {}
由于只有不是打字错误，不适合我 @media屏幕和(max-width: 930px)需要在(和)和开始括号之间留有空间
在html的头部部分添加下面标签
<meta content="width=device-width, initial-scale=1" name="viewport" />
@media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
