Question

我的JavaScript遇到了问题。有时，代码根本不执行，我无法将其归类为特定的事物，例如引发错误并暂停代码或类似内容。我打算做的是根据设备的分辨率更改图片（徽标）。

	function logo_change() {
		if ( document.body.clientWidth < 390 ) {
			document.getElementById('logo').style.display = 'none';
			document.getElementById('logo-m').style.display = 'block';
		}
		else {
			document.getElementById('logo-m').style.display = 'none';
			document.getElementById('logo').style.display = 'block';
		}
	}
	window.onresize = function() {
		logo_change();
	};
	window.onload  = function() {
		logo_change();
	};

#logo {
  max-width: 20%;
  min-width: 185px;
  float: left; 
  margin-top: 17px;
}
#logo-m {
  width: 50px;
  float: left;
  margin-top: 17px;
  display: none;
}

<a id='logo-l' class="logo-l" href="index.php">
	<img src="https://d1afx9quaogywf.cloudfront.net/sites/default/files/Logos/facebook-logo_0.png" id='logo' class="logo" name="logo" height="60"></img>
	<img src="https://www.ricksdailytips.com/wp-content/uploads/2016/08/f.png" id='logo-m' class="logo-m" height="50"></img>
</a>

我尝试通过媒体查询执行基本相同的操作（使用显示块，而没有显示），但是链接会折叠等等。

此外，如果我调整页面大小，则代码将执行并且徽标也会更改。因此，我的事情是window.onload事情。

感谢您的回复。

Answer 1

要对CSS媒体查询执行此操作：

#logo, #logo-m {
  display: none;
  /* other common properties */
}
@media screen and (max-width: 389px) {
  #logo-m { display: block; }
}
@media screen and (min-width: 390px) {
  #logo { display: block; }
}

载入JavaScript有时无法执行

1 个答案: