一、跟随浏览器窗口的缩放，展示的列表列数增加或减少

比如列表页的布局是这样的,第一层为.home,第二层为content, 第三层是好多个list

希望在浏览器窗口宽度小余1200px时展示3列，1560px时展示4列，1870时展示5列，这种响应式布局要求内容列表的每一项宽度是一样的，只是在窗口宽度增加时增加列数，由于每一项宽度不变化，当浏览器窗口宽度大于设定的阈值时，列表区域两侧会增加空白。设置列表页区域永远是居中显示。

实现思路为：计算3列、4列、5列时内容列表的宽度，在媒体查询里设置对应的宽度，比如3列时content元素的宽度为971px, 4列时content的宽度为1200px,注意这些值是根据每一个列表元素的宽度及margin的值计算得来的。 这样即可实现随着窗口的改变，对应列表增加或减少。 具体实现为：

@media  screen and (min-width: 439px) {
	  
	   .home .content{
	   		width: 971px;
	   }
	  
	}
	
	@media  screen and (min-width: 1560px) {
		.home .content{
			width: 1200px;
		}
	 
	}
	
	@media  screen and (min-width: 1870px) {
		.home .content{
			width: 1510px;
		}
	 
	}
	

二、跟随浏览器窗口的缩放，展示的列表列数增加或减少，并且在一定阈值时列表内元素也增大或缩小

比如列表页的布局仍旧如下图1所示，但是希望在浏览器窗口变化时，不仅展示的列数变化，每一项元素的宽度也变化。这样就会填充这个列表区域，两侧不会留有空白。比如设置浏览器窗口<=1250px时，展示3列，效果如下图所示

当缩放宽度至1100px时，可以看到每个元素的宽度变窄。 实现思路： 媒体查询中定于阈值及展示的列数，并且使用calc()动态计算每个元素的宽度。

@media  screen  and (max-width: 1250px) {
		.home {
				--per-row: 3;
		   }
		.home .content .list{
		   		width: calc( 100% / var(--per-row) - ( ((var(--per-row) - 1) * 16px) / (var(--per-row)) + 0.01px ) );
			
			&:nth-child(3n) {
				margin-right: 0;
			}  
		}
	}
	@media  screen and (min-width: 1251px) and (max-width: 1680px) {
		.home{
				--per-row: 4;
		   }
		..home .content .list{
		   		width: calc( 100% / var(--per-row) - ( ((var(--per-row) - 1) * 16px) / (var(--per-row)) + 0.01px ) );
				&:nth-child(4n) {
					margin-right: 0;
				}  
		}  
	}