最近写了移动端魅族官网,收获很大
首先个人觉得写移动端比写pc端简单,因为可以用到很多css3的属性儿不用考虑兼容,毕竟手机没有IE浏览器,笑......
为了使页面适应不同的手机尺寸,我用的方法是rem这个表示宽度,首先rem是相对于根标签的大小,即html的大小,需要跟em区别开,em是相对于文字的大小,
这里我们需要写两个代码,首先是<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">
其次是用js操控根据不同的手机尺寸改变html的大小,<script>
(function change(){
var oFz = document.getElementsByTagName("html")[0];
var width = window.innerWidth;
oFz.style.fontSize = width/10 +"px";
window.onresize=function(){change();};
})();
</script>
接下来我把我写的代码上传到这里,有兴趣的人可以自行下载。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> <style> </style> </head> <body> <section id="wrap"> <header id="header"> <div class="h-tit"> <h1><a href=""> <img src="images/logo.svg" alt=""> </a></h1> <form action="" method="post" id="search"> <input type="text" placeholder="魅蓝E3"> </form> <a href="" class="cart"></a> <span class="h-menu"></span> </div> <nav class="h-nav"> <ul> <li><a href="">推荐</a></li> <li><a href="">手机</a></li> <li><a href="">配件</a></li> <li><a href="">影音</a></li> <li><a href="">智能数码</a></li> <li><a href="">居家生活</a></li> </ul> </nav> </header> <section id="main"> <div class="banner"> <ul class="banner-pic clearfix"> <li> <a href=""> <img src="images/banner4.jpg" alt=""> </a> </li> <li> <a href=""> <img src="images/banner1.jpg" alt=""> </a> </li> <li> <a href=""> <img src="images/banner2.jpg" alt=""> </a> </li> <li> <a href=""> <img src="images/banner3.jpg" alt=""> </a> </li> <li> <a href=""> <img src="images/banner5.jpg" alt=""> </a> </li> </ul> <ul class="banner-page"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="m-bar"> <ul> <li> <img src="images/icon2.png" alt=""> <p>魅族官方商城</p> </li> <li> <img src="images/icon1.png" alt=""> <p>全场顺丰包邮</p> </li> <li> <img src="images/icon3.png" alt=""> <p>7 天无理由退货</p> </li> </ul> </div> <div class="m-activity"> <ul> <li><a href=""> <img src="images/activity1.png" alt=""> <p>超级福利站</p> </a></li> <li><a href=""> <img src="images/activity2.png" alt=""> <p>推荐有奖</p> </a></li> <li><a href=""> <img src="images/activity3.png" alt=""> <p>一周上新</p> </a></li> <li><a href=""> <img src="images/activity4.png" alt=""> <p>APP专享</p> </a></li> </ul> </div> <div class="m-recomend clearfix"> <a href=""> <img src="images/recommend1.png" alt=""> </a> <a href="" class="fl"> <img src="images/recommend2.jpg" alt=""> </a> <a href="" class="fr"> <img src="images/recommend3.jpg" alt=""> </a> </div> <div class="m-phone-list"> <h2 class="line">智能手机</h2> <a href="" class="m-phone-ad"> <img src="images/phone-header.jpg" alt=""> </a> <ul class="pro-list clearfix"> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-ad"> <a href=""> <img src="images/Cgbj0VrhqamAGk4NAAFICNbH-fI952.jpg" alt=""> </a> </li> <li class="pro-ad"> <a href=""> <img src="images/4f48200e-1ae1-409d-b0ba-c9a58d05f33c.png" alt=""> </a> </li> </ul> </div> <div class="m-parts"> <h2 class="line">智能配件</h2> <ul class="m-parts-hot"> <li> <a href=""> <img src="images/084f3098-ba48-47e1-8841-edd867c7c097.jpg" alt=""> <div class="detail fr"> <h3>POP 真无线蓝牙耳机</h3> <p class="line">双无线 零设限</p> <span>¥499 </span> </div> </a> </li> <li> <a href=""> <div class="detail fr"> <h3>POP 真无线蓝牙耳机</h3> <p class="line">双无线 零设限</p> <span>¥499 </span> </div> <img src="images/6728e960-f882-420d-b368-39dcb1bdc151.jpg" alt=""> </a> </li> <li> <a href=""> <img src="images/c840004b-e84d-4118-953b-bd856efa852e.png" alt=""> <div class="detail fr"> <h3>POP 真无线蓝牙耳机</h3> <p class="line">双无线 零设限</p> <span>¥499 </span> </div> </a> </li> <li> <a href=""> <div class="detail fr"> <h3>POP 真无线蓝牙耳机</h3> <p class="line">双无线 零设限</p> <span>¥499 </span> </div> <img src="images/65694d98-e2a0-4437-9291-d0b84420bcb6.png" alt=""> </a> </li> </ul> <ul class="pro-list clearfix"> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> <li class="pro-item"> <a href=""> <img src="images/[email protected]" alt=""> <h3>魅族 15</h3> <p>4月29日0点开售</p> <span>¥2499 起</span> </a> </li> </ul> </div> </section> <footer id="foot"> <div class="serve"> <ul> <li><a href=""><img src="images/server1.jpg" alt=""></a></li> <li><a href=""><img src="images/server2.jpg" alt=""></a></li> <li><a href=""><img src="images/server3.png" alt=""></a></li> <li><a href=""><img src="images/server4.png" alt=""></a></li> </ul> </div> <div class="f-contact"> <span>400-788-3333</span> <span><a href="">在线客服</a></span> </div> <div class="foot-nav clearfix"> <p class="fl"> <a href="">粤ICP备13003602号-2 </a> <a href="">合字B2-20170010</a></br> <a href="">营业执照 ©2018 Meizu </a> <a href="">All rights reserved</a> </p> </div> </footer> </section> <script> (function change(){ var oFz = document.getElementsByTagName("html")[0]; var width = window.innerWidth; oFz.style.fontSize = width/10 +"px"; window.onresize=function(){change();}; })(); </script> </body> </html>