先上效果圖：
PC端效果：
移動端效果：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="pc.css" media="screen and (min-width:700px)" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:699px)" />
</head>
<body>
<h1 style="margin-top:20px;text-align:center;">響應式布局</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
pc.css 樣式代碼：
*{margin:0;padding:0;}
ul{width:calc(100% - 20px);padding:0 10px;margin:100px auto;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid blue;width:calc(25% - 2px);height;100px;float:left;text-align:center;}
mobile.css 樣式代碼：
*{margin:0;padding:0;}
ul{margin:100px auto;padding:0 5px;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid red;width:calc(100% - 2px);height;100px;float:left;text-align:center;}
我設置的臨界點是699px,實際項目中大家可根據項目需求來設置更為精准的不同屏幕下的css,一般考慮PC端，Pad，手機端 三種就可以了！