<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
* {margin:0 auto;padding: 0;border: 0;-Webkit-user-select: text}
另外对于网页的初始宽度可以适应max-width来控制,其他容器也是类似,要避免直接出现定义body体的宽度。
附件:
网页参考源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>Bootstrap 101 Template</title> <meta name="keywoRDS" content="" /> <meta name="descrIPtion" content="" /> <link HRef="css/mAIn.css" rel="stylesheet"> </head> <body> <DIV id="top" class="">这是顶部信息</div> <div id="nav">这是导航栏 <div id="">菜单</div> <div id="">左边</div> <div id="">右边</div> </div> </body> </html>
CSS文件:
* { margin:0 auto; padding: 0; border: 0; -webkit-user-select: text } /*头部*/ #top { max-width:680px; background-color:red; } #nav { max-width:680px; background-color: bisque; } .menu { max-width:680px; background-color: brown; } .cleft { width: 60%; min-height: 400px; float: left; background-color: #5FAD7E; } .cright { width: 40%; float: left; min-height: 400px; background-color: chocolate; } /*清浮动*/ .clearfix:before, .clearfix:after { content:"."; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */ .fl { float:left; } .fr { float:right; }