@media实现响应式例子

效果图

思路

1.先写全屏的布局

2.在分别在@media里面写平板、手机的尺寸对应的响应式的css

			/* 通用样式 */
			*{
   
				margin: 0;
				padding: 0;
			}
			ul{
   
				list-style: none;
			}
			/* 1.设置一直居中 */
			ul{
   
				width: 1600px;
				margin: 0 auto;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}
			/* 一行放五个width:18% */
			ul>li{
   
				width: 18%;