微网站-使用flexible.js实现移动端设备适配_html/css

移动端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; }

Copy after login

这样就实现了最终想要的结果，是不是很简单。5.最后来看一看我们写的html,css，以及最终生成的html

html

Document 
   消息 清空全部 
  
  
  
平台公告 2015-10-11
 2015冬款上新2015冬款上新2015冬款上新
 
 
  
  
  
平台公告 2015-10-11
 2015冬款上新2015冬款上新2015冬款上新

Copy after login

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;}

Copy after login

页面生成的html，注意flexible帮我们的页面添加了几处修改

pic5.png