今天很幸运,地铁第二站就遇到了一个座位,不能浪费这宝贵的机会,我掏出电脑来写下这篇迟到了很久文章。

我们知道,H5(意思就是移动端)页面分为单屏应用和多屏页面。比如某个活动抢红包页面,通常是单屏,而某个公司官网为了展示更多内容通常会选择多屏。

单屏例子:分享得红包

多屏例子:tollk官网手机版

以上两个例子是我自己写的,字体原因切图比较多,不要分析源码啦很差的。

对于单屏页面的大小适配我推荐3种方法,这里我会用几天前我厂做的砍价(抢红包)页面(也是我写的)举例,页面如下:

抢红包

我们可以知道,页面主体中规中矩,分为两部分:上半部分是介绍页面,下半部分是主体界面,有一个点击按钮来负责全部用户交互,为了适配iphone4到6plus以及众多安卓,我们对整个页面的架构可以有如下几种方案:

1.

高度百分比方案——整个屏幕的主要高度高度都用百分比定位,比如介绍部分占高度的百分之30,点击抢红包部分占剩下的百分之70。

  • 优点——易于理解好上手
  • 缺点——由于行内样式,行间样式和它们的父子元素具有复杂的宽高关系,因此内部,比如介绍部分的内部的诸多元素想必还要用到px,em等定位方式,因此不那么和谐和有保障,容易小屏溢出或者大屏留白。在这个页面表现为倒计时文字部分和帮谁谁谁砍价的部分难以控制。 2.

flex按列布局——  flex布局是一个很不错的方式:对于这个页面,我们可以有如下构想:对于介绍部分,用px或者em定位和布局,而对于剩下的部分则用flex让他填充好下边的空间,再用绝对定位让砍价按钮水平垂直都居中,简直丝滑。

  • 优点——丝滑。
  • 缺点——要硬说有什么缺点的话,那么下端宽度不好控制算一个吧,试想这样构建出来的页面可能会在iphone4中下端一个按钮几乎占满,而在6普拉斯中则会有大量留白。 3.

大杀器rem——我们知道在rem出来之前,em有着定位根为父元素的天然缺陷,比如在这样的页面中。

html>body>div.parent>div.son

有这样的css

.html{

font-size:10px;

.parent{

font-size:2em;

.son{

font-size:1em;

}

}

}

注意以上css写法用了sass。html也简写了。

然后你猜son的字体是多少px?是20,没错。因为他的参照元素是.parent元素,而不是根,这样的话嵌套多了谁敢用em。

幸好rem的横空出现解决了这种问题:rem的参照物就是根元素的font-size,这让我们对于不同的页面有了设置全局标准的可能,大屏幕,我可以设置大的字体单位,小屏幕设置小的。一举解决了百分比定位和flex布局的遗留问题。

怎样确定字体单位呢?有两种方法,第一种比较优雅:媒体查询,我们可以用媒体查询看看浏览设备的宽高,然后设置一个合适的字体单位,另一种方法比较精确,那就是用js去算。

//宽度document.body.clientWidth

//高度document.body.clientHeight

计算方法是这样的,对于这个页面来说

假设:设计稿高度1500px,设计稿中介绍部分高度300px,倒计时字体大小40px,屏幕高度1000px。

第一步:计算单位:html的font-size = 屏幕高度 / 100  -->10px;

第二步:介绍部分设置成高度30rem。

第三步:字体大小设置成4rem。

啊哈,发现他的优点了嘛,没错,全局等比放大的适应。这就意味着,你在6plus里面能看的页面,在iphone4里面同样能看,而且不会因为屏幕小而发生元素交叠的情况,也不会因为屏幕大而出现留白的情况,是我目前最喜欢的一种表达方式。

优点:做到了完美适配。

缺点:只是等比放大,小屏下字体小,大屏下字体大(不过从经验来讲,字体的大小并不明显,因为屏幕在那呢,看着也舒服)。

缺点反驳:我觉得只有一套设计稿,大小屏幕都兼顾完美是不可能的,因为你不知道什么时候该让一个字占用绝对20像素还是绝对是屏幕宽度的百分之五。如果要做到兼顾,也是可以的:用多套设计稿+css媒体查询为不同宽度的页面写好不同的css样式。

对于多屏页面。

1.

在reset.css页面加入媒体查询来根据不同的宽度定好字体单位。

2.

大杀器rem

使用方法同上,不过上面是根据高度来确定字体单位,这里可以用宽度来确定字体单位。

让页面在都完美显示算是我实习期间的研究之一,经过了比较,我还是用大杀器rem觉得比较方便一些,当然还有诸多方法值得尝试,比如rem+flex等等,如果有不当之处,还请各位前辈抨击,批评,丢石头给我,感谢前辈和同行的指点!

以及说好了地铁上写完,现在都第二天上午了……