您的位置：首页 > Web前端 > HTML5

H5页面加载另一个页面的问题

2017-11-04 18:23 239 查看

前天（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端差不多的效果了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： H5自适应响应式移动端和PC端

相关文章推荐

新的分享

章节导航