Question

我正在通过Lynda.com关于响应式网络体验的教程。我的Javascript主要是工作。从教师那里JS的目标是“我们根据窗口outerWidth确定windowWidth”。然后我们输出该信息以及屏幕是小，中还是大（@media断点）。

如同，“945（931 + 14）很大”。 My work so far与它同在。

问题在于，当窗口宽度发生变化时，“大”不会变为“中”，然后变为“小”。

谢谢！

如果它有用，这里有一个包含所有HTML / CSS代码的codepen。这是JS。

/* JavaScript Document */

var windowSize = '';
var windowWidth = 0;
var actualSize = 0;

$(document).ready(function () {
	
	checkBrowserSize();
	loadHero();

});	

function checkBrowserSize() {
	windowWidth = window.outerWidth;
	var contentWidth = $('body').width();
	var sizeDiff = windowWidth - contentWidth;
	actualSize = windowWidth - sizeDiff;
	
	if (actualSize > 800) { newWindowSize = 'large'; }
	if (actualSize <= 800 && actualSize > 500) {newWindowSize = 'medium'; }
	if (actualSize <= 500){ newWindowSize = 'small'; }
	$('h1').html(windowWidth +' ('+contentWidth+'+'+sizeDiff+')'+' is '+newWindowSize);

	
}

function loadHero() {
	
	$('#hero').load('content/hero_content_large.html');
	
}

Answer 1

您的问题是该功能仅在文档就绪时运行一次。您必须将函数绑定到onresize事件，以便每次触发resize事件时函数都会运行（阅读有关事件处理程序的信息）

以下是一个JavaScript示例：http://www.w3schools.com/jsref/event_onresize.asp

这是一个jQuery示例： http://www.w3schools.com/jquery/event_resize.asp

Javascript没有在教程中声明窗口大小

1 个答案: