移动端web开发越来越火，同时移动端适配也是一个很让人头疼的事情，你不能让一个同样大小的元素在不同的设备上都显示一样大小。（iphone6和iphone4下大小肯定是应该不一样的，否则用户体验很差）
下面我将以750px的设计稿为例，分析如何制作一个适配多终端的页面。
首先来看最终的效果图：
- iphone6下
pic1.png
- iphone4下
pic2.png
你看不同设备上看起来都是和谐的，不同设备，元素的大小都不同。
你所希望的是不是这样的结果呢？这种效果是如何实现的呢？
别急，下面慢慢讲。
- 首先，我们得了解以下几个概念：
- css像素
- 物理像素
- devicePixelRatio
- layout viewport
- visual viewport
- ideal viewport
虽然上面列举了很多，但是不要被吓着，其实都很简单的，网上也有非常多的介绍，只要大致了解就可以了。
2.了解我们使用的库flexible.js
- 手机淘宝从2014年中开始，全面推行flexible设计。什么叫flexible呢？其实flexible就是responsive的低端形态和基础。
- 手机淘宝用JS来动态写meta标签，手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体。
我们可以在GitHub上找到这个项目，可以通过网上查阅资料了解更多。
3.了解一个sublime text插件，加快我们的开发速度
这个不是必须，也可以自己手动计算。大家可以在我之前写的一篇文章中，了解该插件如何安装使用，真的非常非常非常简单，重要的话说三遍~
4.下面就真正开始主题啦
- 我所做页面的设计稿是750px的，有图有真相。
pic3.png
你看我没有欺骗你吧~
- 以顶部为例，介绍如何制作，首先还是看设计稿
pic4.png
通过ps获得顶部的高度，在750设计稿上96px,所以我们要用96/(750/10)，得到对应的rem值。
.msg-header{
position: relative;
padding: 0 0.4rem;
height: 1.28rem; //96/(750/10)
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;
}
这样就实现了最终想要的结果，是不是很简单。
5.最后来看一看我们写的html,css，以及最终生成的html
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="flexible.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="container">
<div class="msg-header clearfix">
<a href="javascript:void(0);" class="baseIcon iconBack fl"></a>
<span class="c-333">消息</span>
<a href="javascript:void(0);" class="fr clear">清空全部</a>
</div>
</section>
<section class="container msg-content">
<div class="each-msg">
<div class="media-left">
<span class="baseIcon iconMsg"></span>
</div>
<div class="media-right msg-right">
<h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3>
<p class="desc">2015冬款上新2015冬款上新2015冬款上新</p>
</div>
</div>
<div class="each-msg">
<div class="media-left">
<span class="baseIcon iconMsg"></span>
</div>
<div class="media-right msg-right">
<h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3>
<p class="desc">2015冬款上新2015冬款上新2015冬款上新</p>
</div>
</div>
</section>
</body>
</html>
- css
此处省略初始化的样式
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.fl{
float: left;
}
.fr{
float: right;
}
.baseIcon{
display: inline-block;
background: url(bgIcon.png);
background-size:6.666667rem 6.666667rem;
}
.msg-header{
position: relative;
padding: 0 0.4rem;
height: 1.28rem;
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;
}
.iconBack{
position: absolute;
top: 0.373333rem;
left:0.373333rem;
width: 0.346667rem;
height: 0.533333rem;
background-position: -1.493333rem -1.066667rem;
}
.msg-header .clear{
position: absolute;
right: 0.266667rem;
font-size: 0.4rem;
color: #666;
text-decoration: none;
}
.media-left,
.media-right{
display: table-cell;
vertical-align: top;
}
.media-right{
width: 100%;
border-bottom: 1px solid #eee;
}
.iconMsg{
width: 1.253333rem;
height: 1.253333rem;
background-position: -2.293333rem 0;
}
.media-left{
padding: 0.266667rem;
}
.msg-right{
padding: 0.266667rem;
}
.msg-right .title{
font-size: 0.426667rem;
color: #333;
}
.msg-right .date{
font-size: 0.293333rem;
color: #999;
font-weight: normal;
}
.msg-right .desc{
margin-top: 0.133333rem;
font-size: 0.346667rem;
color: #888;
}
- 页面生成的html，注意flexible帮我们的页面添加了几处修改
pic5.png
好的，微网站—使用flexible.js实现移动端设备适配就介绍到这里，大家可以尝试一下，用过方知其好处。
网友评论
font-size: 0.48rem;那字体如何计算呢？？？