前言
现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。
index
<!DOCTYPE html>
<html>
<head>
<title>响应式布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="header">头部</div>
<div id="left">左侧</div>
<div id="center">中间</div>
<div id="right">右侧</div>
<div id="footer">底部</div>
</div>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
}
/*适应PC端 宽度大于1000px*/
@media screen and (min-width: 1000px) {
#content{
width: 960px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-right: 10px;
}
#center{
width: 540px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: right;
font-size: 30px;
color: #fff;
}
#footer{
width: 960px;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
/*适应pad端 宽度在640-1000之间*/
@media screen and (min-width: 640px) and (max-width: 1000px) {
#content{
width: 600px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-right: 10px;
}
#center{
width: 390px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 600px;
line-height: 300px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-top: 10px;
}
#footer{
width: 600px;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
/*适应移动端 宽度小于640*/
@media screen and (max-width: 639px){
#content{
width: 400px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 100%;
line-height: 150px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-bottom: 10px;
}
#center{
width: 100%;
line-height: 300px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 100%;
line-height: 150px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-top: 10px;
}
#footer{
width: 100%;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}通过@media screen and (限制范围) 来控制网页的布局，例如
min-width代表最小的限制，max-width代表最大的限制。
PC端
Pad端
Mobile端
体验Demo
PC端：点击体验
Pad和Mobile端：扫码体验
作者
Author:TANKING
Web:http://www.likeyunba.com
Date:2020-2-15
WeChat:face6009