最近写了移动端魅族官网，收获很大
首先个人觉得写移动端比写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>