自适应列数显示

要求在在1300px的时候显示4个，出现横向滚动条
布局：

	

		
1
		
2
		
3
		
4
		
5
		
6
		
7
		
8
		
9
		
10
		
11
		
12
		
13
	

css如下：

方法一：行内
.main-wrapper{
  overflow: auto;
}
.ul-list{
  width: 100%;
  font-size: 0;
  overflow: auto;
  li{
    width: 25%;
    min-width: 252px;
    display: inline-block;
    background: red;
    border:1px solid #ccc;
    font-size: 14px;
  }
}

@media (max-width:1300px){
  .ul-list{
    width: 1008px;
  }
}

方法二：弹性
.ul-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li{
    width:25%;
    min-width: 252px;
    display: inline-block;
    background: red;
    border:1px solid #ccc;
    font-size: 14px;
  }
}

@media (max-width:1300px){
  .ul-list{
    width: 1008px;
  }
}

如需要再某个分辨率下显示多少列的话，可以用弹性盒模型+媒体查询 然后 li的宽度等于列数/100%;