Question

我的网站上有以下jQuery，以确保高度始终为全屏：

$(document).ready(function () {
    'use strict';
    sizeContent();
    $(window).resize(sizeContent);
});

 function sizeContent() {
    'use strict';
    var newHeight = $("html").height() + "px";
    $(".wrapper").css("min-height", newHeight); 
  }

这很有效。但是，当我尝试向我的css添加媒体查询以更改文档中字体的大小时，似乎jQuery代码＆＃34;阻止＆＃34; css来自计算屏幕的宽度。这可能是个问题吗？如果是，我怎样才能用最少量的jQuery来解决它？

提前谢谢！

编辑：

这是css：

    @media screen {

        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

    a {
            font-family: letter-gothic-std, monospace;
            font-style: normal;
            font-weight: 400;
            font-size: 1.1em;
            text-decoration: none;
            color: #6f97a7;
        }
}

@media (max-width: 768px) {

    a {
        font-size: 2em;
    }
}

链接的大小根本不会改变。

Answer 1

交换媒体查询顺序：

@media screen {

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    a {
        font-family: letter-gothic-std, monospace;
        font-style: normal;
        font-weight: 400;
        font-size: 1.1em;
        text-decoration: none;
        color: #6f97a7;
    }
}

@media (max-width: 768px) {
    a {
        font-size: 2em;
    }
}

@media screen优先于@media (max-width: 768px)。

font-size: 2em;被font-size: 1.1em;

取消

尝试始终将它们从一般声明声明为特定声明（从大到小声明），让我知道它是否有帮助

是jQuery＆＃34; sizeContent＆＃34;影响css媒体查询？

1 个答案: