最近做了一個移動端頁面，要求適配手機屏幕，用到的是九宮格。在處理屏幕適配上花了不少時間，也在測試中找到最好的布局方法。
分享代碼之余也能夠在下一次的工作項目中避免犯相同的錯誤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>移動端測試</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" type="text/css" href="css/test.css" /> </head> <body> <div class="wrap"> <div class="con"> <table> <tr> <td><div class="box">1</div></td> <td><div class="box">2</div></td> <td><div class="box">3</div></td> </tr> <tr> <td><div class="box">8</div></td> <td><div class="box">m</div></td> <td><div class="box">4</div></td> </tr> <tr> <td><div class="box">7</div></td> <td><div class="box">6</div></td> <td><div class="box">5</div></td> </tr> </table> </div> </div> </body> </html>
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
a{
text-decoration: none;
}
body{
font-size: 62.5%;
font-family:"Microsoft YaHei";
}
.wrap{
width: 100%;
max-width: 750px;
height: 600px;
background: #ff894c;
margin: 0 auto;
}
.con{
width:100%;
position: relative;
left: 0;
top: 120px;
}
table{
margin: 0 auto;
box-sizing: border-box;
padding: 15px 15px 0 0;
}
table tr td{
display: inline-block;
float: left;
padding: 0 0 15px 15px;
}
table tr td .box{
width: 75px;
height: 75px;
line-height: 75px;
display: inline-block;
background: #ffcc99;
color: #fff;
font-size: 2rem;
text-align: center;
}
一開始在做頁面的時候考慮的是用css媒體查詢@media screen and(min-device-width),給每個td加margin值，而且td里也沒有div,用最外層padding值控制距離。
最終在iphone 6 plus 上出現問題，元素的距離沒有顯示。后來改為padding值后，元素終於整齊排列。在往后的項目中，能用padding 值盡量不要用margin值，因為
那就是大大的坑...老是被代碼調戲...如果有更好的建議歡迎留言。