Question

我在我的网页上有这样的声明格式化页面，特别是他们可以通过小型上网本屏幕更好地查看它：

<link rel="stylesheet" media="only screen and (max-height: 750px)" href="netbook.css" />

我的问题是，我可以用javascript做同样的事吗？

我有一组jquery函数，它们也会根据屏幕大小而改变。我想要找到这样的东西：

<link rel="javascript" media="only screen and (max-height: 750px)" href="scripts_netbook.css" />

有任何想法吗？

非常感谢，

丹

Answer 1

我会做的是：

$(function() {
  var script_path = $(window).height() > 750 ? '/path/to/file.js' : '/path/to/otherfile.js';
  $.getScript(script_path, function() { $(window).trigger('script_loaded'); });
  $(window).on('script_loaded', function() {
   //run other code requiring those scripts here
  });
});

编辑：从您的评论中，您似乎想要这样做：

$(function() {
  if ($(window).height() < 750;) {
      $('#footer_index').delay(800).transition({y:-155 }, 1000, 'snap');
  }
});

就调整大小而言，这不会像媒体查询一样工作，而只是在页面加载时。如果你想让它适用于调整大小，你可以做类似的事情

$(window).on('resize', function() { //do stuff });

Answer 2

根据Link Types Reference，JavaScript不是链接类型，因此您的答案是否定的。

您可以根据需要使用以下内容：

screen.onresize = function() {
    if (screen.height <= 750) {
        //Your scripts
    }
};

注意：根据Media Queries 'Height' Spec，

'height'媒体功能描述了目标的高度输出设备的显示区域。对于连续媒体，这是视口的高度，包括渲染滚动条的大小（如果任何）。对于分页媒体，这是页面框的高度。

为了正确配对CSS Media Queries和JavaScript，请始终使用screen.width和screen.height

Answer 3

如果你想要遵循CSS媒体查询的风格，你必须使用.resize（）函数，这是代码：

var resizeBool = ($(this).height() < 750);
$(window).resize(function() {
    var resizeBoolTmp = ($(this).height() < 750);
    if (resizeBool === resizeBoolTmp) return;
    resizeBool = resizeBoolTmp;
    //your code that must be updated when the size changes
    //from previous comments/answer, maybe this? 
    //$('#footer_index').delay(800).transition({y: -155}, 1000, 'snap');
});

此代码仅在高度限制由一方或另一方传递时更新操作。 Here是一个片段，展示了它是如何工作的（检查控制台，看看达到宽度限制时会发生什么）。

链接关系查询 - 我可以创建一个javascript关系以及css吗？

3 个答案: