响应布局就是不同宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而使页面适应不同宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式布局</title> <style type="text/css"> body,ul{ margin: 0; padding: 0; } ul{ list-style:none; } .con{ border:1px solid #000; overflow:hidden; } .con li{ width:23%; height:200px; background-color: hotpink; float:left; margin:30px 1%; } /*当宽度小于700时下面的样式覆盖上面的样式*/ @media (max-width:700px){ .con li{ width:46%; margin:30px 2%; } } /*当宽度小于500时下面的样式覆盖上面的样式*/ @media (max-width:500px){ .con li{ width:90%; margin:30px 5%; } } </style> </head> <body> <ul class="con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>