在styles.css中,我使用的是媒体查询,两者都使用以下变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时,网站会在常规浏览器(Safari,Firefox)中调整我想要的布局,但是,手机上根本不会显示移动布局。相反,我只看到默认的CSS。
有人能指出我正确的方向吗?
答案 0 :(得分:379)
所有这三个都是有用的提示,但看起来我需要添加元标记:
<meta content="width=device-width, initial-scale=1" name="viewport" />
现在它似乎适用于Android(2.2)和iPhone ......
答案 1 :(得分:52)
不要忘记在媒体查询中使用标准的css声明 ,否则查询也无法正常工作。
let $test-data := (
<priority>
<data>hello</data>
</priority>,
<status>
<data>hi</data>
</status>
)
return
(
xdmp:document-set-properties("/test.xml", $test-data),
xdmp:document-set-properties("/test2.xml", $test-data)
)
答案 2 :(得分:21)
我怀疑关键字only
可能是问题所在。我使用像这样的媒体查询没有问题:
@media screen and (max-width: 480px) { }
答案 3 :(得分:17)
我在新闻网站上使用了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链接线就像上面一行一样简单。
答案 4 :(得分:12)
今天我遇到了类似的情况。媒体查询无效。过了一会儿,我发现'和'之后的空间丢失了。 适当的媒体查询应如下所示:
@media screen and (max-width: 1024px) {}
答案 5 :(得分:5)
包含如下所示的meta标签可能会导致浏览器以不同的方式处理视口缩放。
<meta content="width=device-width, initial-scale=1" name="viewport" />
答案 6 :(得分:1)
@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;
}
答案 7 :(得分:1)
确保您的css评论全部使用此标记/*
... */
- which is the correct comment markup for css according to MDN
我直接从他们的文档中复制了bootstrap 4媒体查询,并且每个查询都标有相同的javascript样式注释标记//
!
此外,IntelliJ文本编辑器允许我在LESS文件中注释掉特定的css行,但自动使用//
。它不是免费软件所以我认为它是正确的。有一个偏好菜单可以纠正这种行为。
此外,使用值得信赖的在线验证器验证您的CSS。 Here's one by W3
答案 8 :(得分:0)
由于没有拼写错误对我不起作用 @media screen and(max-width: 930px) 需要在 (and) & 左括号@media screen 和 (max-width: 930px) 之间留出空间
答案 9 :(得分:0)
我使用了一些方法。 在我使用的相同样式表中:@media(max-width:450px),或单独确保正确地在标题中有链接。我查看了你的fixmeup,你有一个令人困惑的css链接数组。它就像你对HTC欲望S的说法一样。
答案 10 :(得分:0)
对于遇到相同问题的每个人,请确保您实际上写的是“ 120px”而不是“ 120px”。这是我的错误,这使我发疯。
答案 11 :(得分:0)
总是以px或rem等单位提及max-width和min-width。这为我解决了。如果我写的时候没有单位,只有数字值,浏览器将无法读取媒体查询。例: 这是错误的 @media only屏幕和(最大宽度:950) 和 这是正确的 @media only屏幕和(最大宽度:950px)
答案 12 :(得分:0)
css代码的顺序也很重要,例如:
@media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
由于执行命令,上述代码无法正常工作。需要写如下:
.example-text{
color:blue;
}
@media(max-width:600px){
.example-text{
color:red;
}
}
答案 13 :(得分:0)
我从未见过的奇怪原因:如果您在媒体查询(在Firefox 69中)之外使用“父>子”选择器,则可能会中断媒体查询。我不确定为什么会发生这种情况,但是对于我的情况,这没有用...
@media whatever {
#child { display: none; }
}
但是在页面的上方添加父项以匹配其他CSS,这是可行的...
#parent > #child { display: none; }
似乎没有必要指定父对象,因为id是非常特定的,应该没有歧义。也许这是Firefox中的错误?
答案 14 :(得分:0)
把另一个答案扔进去。如果您尝试使用CSS变量,那么它将悄然失败。
@media screen and (max-device-width: var(--breakpoint-small)) {}
(根据设计)CSS变量不适用于媒体查询。
答案 15 :(得分:0)
我最近也遇到了这个问题,后来我发现这是因为我没有在and
和(
之间放置空格。
这是错误
@media screen and(max-width:768px){
}
然后我将其更改为更正
@media screen and (max-width:768px){
}
答案 16 :(得分:0)
如果浏览器缩放级别不正确,也可能会发生。您的浏览器窗口缩放应为100%。在Chrome中,使用Ctrl + 0
重置缩放级别。
答案 17 :(得分:0)
对我来说,我曾指出max-height
而不是max-width
。
如果是你,请改变它!
@media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}
答案 18 :(得分:-2)
嗯,在我的例子中,宽度值后面的 px
丢失了......有趣的是,W3C validator 甚至没有注意到这个错误,只是默默地忽略了定义。
答案 19 :(得分:-3)
我遇到了同样的问题,结果我的媒体查询顺序错误。它们应该在 CSS 中从最宽到最小定义