Question

我有一个window.matchMedia的问题，在下面的脚本中我试图将数字增加3，当屏幕达到最大宽度768px时，怎么没有发生任何建议？

<script>
var mq = window.matchMedia('@media (max-width:768px;)');
	mq.addListener(function(changed) {
		if(changed.matches) {
		 var $x = document.getElementsByClassName("example");
 			for(i=0; i < 40; i++){ 	
    			$x[i].innerHTML = i+3;
			 } 
 		}else {
	 		$x[i].innerHTML = i+1;
	  } 
});
</script>

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
@media (min-width:768px){
	body{background-color:#929292;}
</style>
</head>
<body>
<div class="example">1</div>
<div class="example">2</div>
<div class="example">3</div>
<div class="example">4</div>

</body>
</html>

Answer 1

在css中尝试这样（根据需要更改媒体查询） 3表示初始值

    body {
        counter-reset: item 0;
        list-style-type: decimal;
    }

    .example:before {
        content: counter(item, decimal) ' ';
        counter-increment: item;
    }

    @media (max-width: 768px) {
        body {
            counter-reset: item 3;
        }
    }

你可以到这里：jsfiddle并输入html：

<div class="example">a</div>
<div class="example">b</div>
<div class="example">c</div>
<div class="example">d</div>
<div class="example">e</div>

和css：

body {
    counter-reset: item 0;
    list-style-type: decimal;
}

.example:before {
    content: counter(item, decimal) ' ';
    counter-increment: item;
}

@media (max-width: 10px) {
    body {
        counter-reset: item 3;
    }
}

您会看到数字从1到5，当您将查询限制更改为1000时，它会变为4到8

window dot matchMedia

1 个答案: