正文
CSS3——PC以及移动端页面适配方法（响应布局）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
响应布局就是不同宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而使页面适应不同宽度。
<!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>
