自适应列数显示

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

<div class="main-wrapper">
	<ul class="ul-list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
	</ul>
</div>

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