[英]Link relation query - can I create a javascript relation as well as css?
我在我的网页上有这样的声明格式化页面,特别是他们可以通过小型上网本屏幕更好地查看它:
<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" />
有什么想法吗?
非常感谢,一如既往
担
我会做的是:
$(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 });
根据链接类型参考 , JavaScript
不是链接类型,所以你的答案是否定的。
您可以根据需要使用以下内容:
screen.onresize = function() {
if (screen.height <= 750) {
//Your scripts
}
};
注意 :根据媒体查询'高度'规范 ,
“高度”媒体功能描述了输出设备的目标显示区域的高度。 对于连续媒体,这是视口的高度,包括渲染滚动条的大小(如果有)。 对于分页媒体,这是页面框的高度。
因此,为了正确配置CSS Media Queries
和JavaScript
,请始终使用screen.width
和screen.height
如果你想遵循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');
});
此代码仅在高度限制由一方或另一方传递时更新操作。 这是一个片段,显示它是如何工作的(检查控制台,看看达到宽度限制时会发生什么)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.