爲使手機頁面在電腦瀏覽器中打開時依然保持居中顯示的良好佈局，所以需要一個良好的兼容結構。
源碼示例效果圖：
| 手機端 | 電腦端 |
 |
 |
源碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="author" content="qq 1846492969,[email protected]">
<title>移動端設置最大寬度兼容PC</title>
<style type="text/css">
body{
margin: 0;
background-color: #F6F6F6;
color: #333;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
}
header>div{
height: 44px;
background-color: #fff;
max-width: 420px;
width: 100%;
margin: 0 auto;
border-bottom: #e5e5e5 solid 1px;
line-height: 43px;
text-align: center;
font-size: 16px;
}
footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 98;
}
footer>div{
height: 50px;
background-color: #fff;
max-width: 420px;
width: 100%;
margin: 0 auto;
border-top: #e5e5e5 solid 1px;
}
footer>div>div{
height: 100%;
line-height: 49px;
text-align: center;
font-size: 16px;
}
footer .active{
color: #d43f3a;
}
main{
max-width: 420px;
width: 100%;
margin: 0 auto;
padding: 44px 0 50px 0;
box-sizing: border-box;
background-color: #fff;
}
/* 列式彈性盒子 */
.flex_col {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: start;
-webkit-box-align: center;
display: -ms-flexbox;
-ms-flex-wrap: nowrap;
-ms-flex-direction: row;
-ms-flex-pack: start;
-ms-flex-align: center;
-ms-flex-line-pack: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.flex_col.flex_col_4>*{width: 25%;}
</style>
</head>
<body>
<header>
<div>頂部標題</div>
</header>
<main>
<div style="height: 1000px;padding: 0 15px;" id="helang">
<script type="text/javascript">
for (var i = 1; i <= 6; i++){
document.write('<h'+i+'>標題-'+i+'</h'+i+'>');
}
</script>
</div>
</main>
<footer>
<div class="flex_col flex_col_4">
<div class="active">消息</div>
<div>通訊錄</div>
<div>發現</div>
<div>我</div>
</div>
</footer>
</body>
</html>
作者：黃河愛浪 QQ：1846492969，郵箱：[email protected]
本文原創，著作權歸作者所有，轉載請註明原鏈接及出處。