CSS媒体查询“@media”在调试中切换移动设备时不起作用。-CFANZ编程社区

CSS媒体查询“@media”在调试中切换移动设备时不起作用。

今天在学习CSS响应式网页设计中的媒体查询，遇到个有趣的问题，主要就是在调试过程中切换移动设备和电脑，同样的代码将有不同的结果。在切换移动设备调试时@media对于"max-width=979px"及以下的设置失去作用。（主要的疑问，在 max-width>=980px 的设置时，它是有作用的）

首先这段是我代码的关键语句。

<style>
	@media only screen and (max-width:979px){
		body{
		background-color:lightblue;
		}
	}
</style>
/*屏幕低于979像素时，body颜色变为浅蓝色*/

现在我打开chrome调试。

也就是媒体查询@media max-width:979px 时移动端调试不起作用。

紧接着我开始了一些无用的代码调整，直到最后添加一条视口viewport代码后，终于可以正常显示了。

<head>
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
</head>

最后：我也发现了可能是导致这个问题的主要原因，在调试过程中（或者可能实际运用中），未设置viewport的页面，存在于低于980像素宽度的移动设备后，整体页面和body的宽度将不随着设备的宽度变小而变小，它将一直停止在980px（直到设置viewport)。

天那！body经过viewport的帮助下终于突破了980px的限制，
并且成功的执行background-color:lightblue

OK，这就是我在今天学习响应式页面遇到的问题和分析（当然可能我存在很明显而又幼稚的错误😂我现在其实需要更正确的思路来解释这个现象！），下面是我这个文章用到的全部代码。

*JS主要运用：

1、querySelector()//方法

2、offsetWidth//属性

3、innerHTML//属性

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
		*{
		margin:0px;
		padding:0px;
		}
		@media only screen and (max-width:979px){
			body{
			background-color:lightblue;
			}
		}
	</style>
</head>

<b style="font-size:80px"><p>此时的&lt;body&gt;宽度：<span id="checkWidth"></span>px</p></b>

<script>
	var bwidth = document.querySelector("body").offsetWidth;
	console.log(bwidth);
	function x(){
	document.getElementById("checkWidth").innerHTML=(bwidth);
	}
	x();
</script>

0 条评论