问window dot matchMedia
EN

Stack Overflow用户

提问于 2016-03-09 05:55:17

回答 1查看 77关注 0票数 1

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

<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>

javascript

responsive-design

回答 1

Stack Overflow用户

发布于 2016-03-09 06:12:33

在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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35878809

复制

相似问题

问window dot matchMedia
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问window dot matchMediaEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问window dot matchMedia
EN