前天（20171102）有个问题是如何让一套网站代码同时适配PC端和移动端问题，网上问了很多都说是H5可以实现， 但自己做的页面都是h5页面，在PC端显示是很看的过去，但在手机端显示确实贼一般的难看。看下面代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = service.width" />
<meta charset="UTF-8">
<title>响应式布局未重置样式</title>
<style>
*{
margin: 0;
padding: 0;
}
.containt{
margin: 5px;
}
.left{
float: left;
width: 20%;
height: 300px;
background: orange;
}
.middle{
float: left;
width: 50%;
height: 400px;
margin: 0 5px 0 5px;
background: blue;
}
.right{
float: left;
width: 25%;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="containt">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
最后问题解决是这样的，请现看需求效果图
再看代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = service.width" />
<meta charset="UTF-8">
<title>响应式测试1</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 20%;
height: 500px;
background: orange;
}
.middle {
float: left;
width: 50%;
height: 700px;
margin: 0 5px 0 5px;
background: blue;
}
.right {
float: left;
width: 25%;
height: 500px;
background: green;
}
.containt {
margin: 5px;
}
@media only screen and (min-width:1024px) {
/*当屏幕大于1024的时候，下面样式才生效，当屏幕宽度小雨1024的时候下面样式就不生效*/
.containt {
width: 1000px;
background: gray;
/*单独此行不生效，必须与overflow: hidden; 才生效*/
overflow: hidden;
margin: auto;
}
}
@media only screen and (min-width:400px)and (max-width:1024px) {
.left {
width: 0;
}
.middle {
width: 60%;
}
.right {
width: 30%;
}
}
@media only screen and (max-width: 400px) {
.left,
.middle,
.right {
width: 98%;
height: 35px;
}
.middle {
margin: 5px 0 5px 0;
}
}
</style>
</head>
<body>
<div class="containt">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
//-----------------------注--------------------------
@media only screen and (min-width:XXpx){}
和@media only screen and (min-width:XXpx)and (max-width:XXpx) { }，设备查询（人称媒体查询）这是，按我个人理解是根据设备的宽度，和你页面的排版需求再次重置，这样就可以在移动端就能看到和PC端差不多的效果了。