在样式。css中,我使用媒体查询,这两者都使用的变体:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

当我缩小窗口时,网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局,然而,手机上根本不会显示移动布局。相反,我只看到默认的CSS。

有人能告诉我正确的方向吗?


当前回答

包含如下所示的元标记会导致浏览器对视口缩放的处理方式不同。

<meta content="width=device-width, initial-scale=1" name="viewport" />

其他回答

又给了我一个答案。如果你试图使用CSS变量,那么它会悄悄地失败。

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS变量在媒体查询中不起作用(根据设计)。

我从未见过的奇怪原因:如果你在媒体查询之外使用“父>子”选择器(在Firefox 69中),它可能会破坏媒体查询。我不确定为什么会发生这种情况,但在我的场景中,这并不奏效……

@media whatever {
    #child { display: none; }
}

但是添加父元素以匹配页面上方的其他CSS,这是可行的…

#parent > #child { display: none; }

似乎指定父类并不重要,因为id是非常具体的,不应该有歧义。也许是火狐浏览器的bug ?

@media屏幕必须位于css的末尾,这一点很重要

在html的头部部分添加下面标签

<meta content="width=device-width, initial-scale=1" name="viewport" />

不要忘记在媒体查询上面有标准的css声明,否则查询也不会工作。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}