Question

我在调试网站时遇到了问题。我有这样的媒体查询：

@media (min-width: 768px) and (max-width: 992px)
{
    .radio-page {
        height: 1470px;
    }
}

@media (min-width: 993px) and (max-width: 1199px)  
{
    .radio-page {
        height: 1525px;
    }
}

（在较大的屏幕尺寸上还有一些休息时间，但我认为它们并不相关）

我没有在尺寸小于768的情况下指定此类的高度，而是选择以下javascript / jquery：

  function confirmer() {
        if ($(window).innerWidth() < 767) {
            var inHeight = $('.iright-4 p').offset().top +
                $('.iright-4 p').height() - $('.inner-radio').offset().top;

            var outHeight = inHeight + $('.inner-radio').offset().top - 42;

            $('.inner-radio').css('height', inHeight + 20);
            $('.radio-page').css('height', outHeight + 50);
        }

        // debug code to report element height
        console.log('radio-page is ' + $('.radio-page').css('height'));
    }

    $(document).ready(function() {
        confirmer();
        $(window).resize(confirmer);
    });

加载时一切都很好。当窗口从767px以下调整为更高的值时，会出现此问题。由于某种原因，媒体查询不再更改.radio-page元素的高度值，尽管javascript被更改为被隔离为＆lt; 767px。 .radio-page保持在调整大小超过阈值时的任何高度。

另外，我怀疑当窗口是＆gt;时，确认器功能被完全禁用。 767px，因为我失去了控制台更新。当我重新调整大小时，一切都很好。 767px（jquery按预期运行）。

非常感谢任何帮助，

Answer 1

SOLUTION

function confirmer() {
  if ($(window).innerWidth() < 767) {
    ...
  } else {
    $('.inner-radio').css('height', '');
    $('.radio-page').css('height', '');
  }
  ...

Answer 2

当javascript代码将您的元素设置为具有特定高度＆lt; 767px，它正在改变这些元素的style属性。当您调整大小到767像素或更高时，您的CSS正在尝试接管javascript，但定义高度的样式属性仍然存在。一种可能的解决方案是在代码中清除它：

  function confirmer() {
    if ($(window).innerWidth() < 767) {
        var inHeight = $('.iright-4 p').offset().top +
            $('.iright-4 p').height() - $('.inner-radio').offset().top;

        var outHeight = inHeight + $('.inner-radio').offset().top - 42;

        $('.inner-radio').css('height', inHeight + 20);
        $('.radio-page').css('height', outHeight + 50);
    }else{
        $('.inner-radio').css('height', '');
        $('.radio-page').css('height', '');
    }

    // debug code to report element height
    console.log('radio-page is ' + $('.radio-page').css('height'));
}

$(document).ready(function() {
    confirmer();
    $(window).resize(confirmer);
});

根据$.css()上的jQuery文档：

将样式属性的值设置为空字符串 - 例如$（ “#mydiv”）。css（“color”，“”） - 从元素中删除该属性如果已经直接应用，则是否为HTML样式属性，通过jQuery的.css（）方法，或通过直接DOM 操纵样式属性。但是，它不会删除已在样式表或。中应用CSS规则的样式元件。

关于丢失控制台更新，我无法回答问题的这一部分。也许您正在获取更新，但由于高度值相同，您的浏览器会将它们识别为相同的消息并将其折叠为一个消息？检查邮件旁边是否有一个小号码。以下是Chrome的一个示例：

Collapsed console messages

Jquery .css（）禁用媒体查询所做的高度更改？

2 个答案: