移动web页面布局研究

---

常用移动布局方法

1. 百分比布局

• 特点：所有的元素都根据其占父元素的百分比来设定尺寸大小。最终屏幕尺寸的变化会带来页面元素等比缩放的效果。同时可以根据不同尺寸的设备设定不同的百分比。
• 不足：布局的时候需要进行很多的百分比计算，有时候由于屏幕尺寸不一样而计算出小数导致不同屏幕上的显示有略微差异。另外，很多页面的设计上有很多元素是固定的尺寸和位置，真正需要根据屏幕大小而变化尺寸的元素并不算很多。

2. rem布局

• 特点：根据一种尺寸用px单位进行布局和重构，然后设置根元素（html）的font-size，并将所有元素的尺寸根据根元素font-size等比转换成rem单位。最后针对不同尺寸屏幕设置不同的根元素font-size大小，即可达到在不同尺寸上所有的元素都是根据窗口尺寸进行等比缩放的效果。（rem可以理解为特殊的百分比布局，即不同尺寸的屏幕上所有元素都是按照同一个比例进行缩放的。通过用rem的方法省去了很多百分比的计算工作。）
• 不足：页面设计的时候，并不希望在不同尺寸的屏幕上所有的元素都进行等比的缩放，例如，原则上普通的字体一般大于12pt，普通title大于18pt可以给用户阅读带来较好体验。除此之外，还有一些情况，例如商家的logo，只有固定尺寸的图片素材，或者在平板电脑上等情况下，所有的元素都进行等比缩放会造成不好的视觉效果。

3. flex-box布局

• 特点：根据页面的特点，将页面进行几个大的固定块极的分割（例如确定页面上下左右几大块的占比或固定值，以及某些块级的垂直居中等），这种场景下用flex-box进行块级的分割布局是个很好的选择。如下图所示。
  Paste_Image.png
     上图中假设一个页面，无论在任何尺寸屏幕上，上部分都是固定的300px高度，下部分占满剩下高度空间，同时上部分左右两边总是2:1的比例呈现，而下部分的内容区域总是水平和垂直居中。那么就可以用flex先进行宏观的块极分割，然后再根据实情对没个块极里面的内容进行填充。
• 不足：在安卓4.4以下chrome浏览器和ios7.1以下的Safari只支持旧版本的flexbox语法，并且不支持wrap属性。

4. 内容居中式布局

• 特点：无论在何种尺寸的屏幕上，最重要的内容尺寸基本一致，并且将重要内容尽量在首屏中居中显示。这种效果最终效果是不同尺寸的屏幕上重要内容以外的边距和背景等可能会被缩放，但是最重要的信息总是在屏幕相对正中的位置显示。还有一种旧的做法是针对一种较小尺寸屏幕设计一套全屏的页面，然后在大屏幕上两边留白，保证所有屏幕看到的内容都一模一样。
• 不足：如果采用留白的方式，视觉体验会很差，大屏幕手机用户会觉得自己看到的内容较为空洞。如果采用上述前种方式，虽然不同用户都可以第一眼get到重要信息，但是会导致不同屏幕手机页面的饱满度存在一定差异。

5. 总结
      以上的方法各有优劣，而在实践中，布局方法的选择也不能从一而终，应该根据实际情况，结合不同方法的特点，取其精华，去其糟粕，以达到最好的效果。以下是一些个人的经验tips和对于H5页面重构的主要过程阐述。

• tips
  • 不要全局使用rem布局，在某些特殊情况下，比如某个局部一定要实现所有元素等比缩放的效果的情况下局部使用rem方式。
  • 文字在不同尺寸屏幕上尽量一样大小，除非有特殊的产品需求。给用户阅读的文字尽量大于12pt。
  • 若要兼容不同尺寸屏幕，设计稿不能在基于大屏幕设计的情况下将可视区撑饱满，上下左右都需要留有空白缓冲区。
  • 重要的内容最好在首屏显眼位置显示，不要出现需要滑动手机才能看到重要信息的情况。
  • 如果有图片，最好将图片width设置为100%，并通过调整其父元素的css属性来控制布局和样式。
• H5页面重构过程
  • 拿到视觉稿后，确认需要兼容哪些手机（设计师可能会以目前比较主流以及尺寸居中的iphone6为基准给出视觉稿），并根据视觉稿特点，确认是否需要兼容屏幕高度（即需不需要一屏展示完整，或者某些内容需要在一屏内展示）。
  • 如果只要兼容屏幕宽度，则确保元素或者字体左右两边留有空白缓冲区，以在小屏幕手机上显示时不会横向溢出（可以设定外围容器固定的padding-left和padding-right，然后通过控制容器内字体大小来调节样式）。
  • 如果需要兼容屏幕高度，则确保页面的下方有足够的空白缓冲区，以在小屏幕上显示时不会纵向溢出而出现滑动。
  • 如果在特殊情况下导致一套字体大小或者元素大小在小尺寸屏幕上没办法保证横向或者纵向的兼容（不溢出），那么可以先用flex-box将页面进行分块，然后在局部使用rem调整文字和其他元素大小进行布局，并对不同尺寸屏幕用media-query的方式设置不同的html->font-size。

微信webview下H5页面重构的特殊性

在微信的webview中，由于顶部的title高度原因，导致不同屏幕尺寸手机的可视区域宽高比各不相同，给页面的重构带来了一定的特殊性。
   在没有title的情况下，主流ios手机（5~7plus）和主流的android手机的高宽比基本都是16:9左右（1080p）。但是由于微信webview的title在ios下固定为64pt，安卓下为73pt，导致越小尺寸屏幕的手机高宽比越小。如下图所示。

Paste_Image.png

经过计算后得出主流的ios和android手机在微信webview下的宽高比如下表所示。

手机	微信webview窗口比例
iphone5(c,s)	14.175 : 9
iphone6(s),7	14.472 : 9
iphone6(s),7 plus	14.609 : 9
android(主流)	14.175 : 9
android(底部带虚拟按钮)	13.25 : 9

结论
  如果设计师希望只设计一套样式并且在不同尺寸的主流手机上都一屏展示完整，那么应该将要展示的内容区域比例控制在14.175 : 9的范围内，如果还要兼容部分底部带虚拟按钮区的安卓手机，那么应该将内容区域比例控制在13.25 : 9之内。如果不希望出现在小尺寸手机上内容饱满而大尺寸手机周边区域显得空洞，那么久要针对以上不同比例做多套设计，例如在小尺寸屏幕上将一些文字和间距进行缩小。