目前在的手机的大小有很多,所以要做到页面适应每一个手机页面,不仅麻烦,而且不利于后期维护。
解决方法:
<script>
var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');
var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 16 + 'px';
</script>
以上代码是在不同手机上都是按照自己的一像素显示。
主要的代码如下:
<style>
body, h1, h2, h3, h4, h5, h6{ margin:0;}
input{ margin:0; padding:0; border:none; -webkit-appearance: none; outline:none;}
ul{ margin:0; padding:0; list-style:none;}
img{ border:none; vertical-align:top;}
html { width:100%; height:100%; overflow:hidden;}
body{ width:100%; height:100%; overflow:auto; font-size:1rem; font-family: Arial, Helvetica, STHeiTi, sans-serif;}
.clear{ zoom:1;}
.cleae:after{ content:""; display:block; clear:both;}
a{ -webkit-tap-highlight-color: transparent; text-decoration:none;}
.head_list{ width:100%; height:9.975rem; background:url(images/list_banner_bg.jpg) no-repeat; background-size: 16rem 9.975rem;}
.head_list .head_click{ width:1.325rem; height:1.2rem;position:fixed; right:0.75rem; top: 0.375rem;}
.head_list .head_control{ width:2.1rem; height:2.1rem;position:fixed; left:1rem; top:2.35rem;}
.head_list .list_logo{ width:100%; height:5rem;}
.head_list .list_logo img{width:7.9rem; height:1.2rem; padding:2.175rem 0 0 4.05rem;}
img{ width:100%;}
.head_list .list_search{ width:15.15rem; height:1.55rem; background-color:#eaeaea; margin-left:0.5rem; border-radius:0.15rem;}
.list_search form{ width:14.8rem; height:1.175rem; padding:0.175rem;}
.list_search .list_search_input{ float:left; width:12.2rem; height:1.175rem; font-size:0.5rem; line-height:1.175rem; background:#fff;padding-left:0.3rem;border-radius:0.15rem 0 0 0.15rem;}
.list_search .list_search_submit{ float:left; width:2.3rem; height:1.175rem; font-size:0.5rem; line-height:1.175rem; color:#fff; border-radius:0 0.15rem 0.15rem 0; background:url(images/list_search.png) no-repeat 0.25rem 0.375rem; background-size:0.375rem 0.375rem; background-color:#f26820;}
.head_list .nav_list{ width:12.05rem; height:2.25rem; padding:0.7rem 2rem 0.6rem 2rem;}
.head_list .nav_list .nav_item{ float:left; width:2.325rem; height:0.925rem; font-size:0.5rem; color:#5a5a5a; background:url(images/bg.png) no-repeat; background-size:2.35rem 0.95rem; line-height:0.925rem; text-align:center; margin:0 0.275rem 0.275rem 0.275rem; border-radius:0.15rem;}
.head_list .nav_list .nav_item:hover{ color:#f24d18;}
.main_list{ width:100%; padding:1.75rem 1rem 0 1rem; border-sizing:border-box;}
.main_list .main_item{ float:left; width:6.575rem; height:3.675rem; margin-right:0.875rem; padding-bottom:0.75rem;}
</style>
</head>
<body>
<header class="head_list">
<div class="head_click"><img src="images/icon_click1.png" alt="" /></div>
<div class="head_control"><img src="images/control.png" alt="" /></div>
<div class="list_logo"><img src="images/logo.png" alt="" /></div>
<div class="list_search clear">
<form action="" method="post">
<input type="text" class="list_search_input" placeholder="爱家乐风扇" />
<input type="submit" class="list_search_submit" value="搜索" />
</form>
</div>
<nav class="nav_list clear">
<a href="#" class="nav_item">牛奶</a>
<a href="#" class="nav_item">风扇</a>
<a href="#" class="nav_item">汽车</a>
<a href="#" class="nav_item">图书</a>
<a href="#" class="nav_item">零食</a>
<a href="#" class="nav_item">护肤品</a>
<a href="#" class="nav_item">衣服</a>
<a href="#" class="nav_item">电器</a>
</nav>
</header>
<div class="main_list">
<a href="#" alt="" class="main_item"><img src="images/list_img1.png" /></a>
<a href="#" alt="" class="main_item"><img src="images/list_img2.png" /></a>
<a href="#" alt="" class="main_item" ><img src="images/list_img3.png" /></a>
<a href="#" alt="" class="main_item"><img src="images/list_img4.png" /></a>
<a href="#" alt="" class="main_item"><img src="images/list_img5.png" /></a>
<a href="#" alt="" class="main_item"><img src="images/list_img6.png" /></a>
</div>
</body>
实现的效果图: