微信H5开发之页面布局

随着微信用户数量超过 10 亿，作为 web 开发者，微信很多时候已经成为了我们 web 页面的载体，我们制作的页面几乎都会在微信上面展示和传播。于是，在开发过程中，如何去兼容微信，就成为了一个 web 开发者必须面对的问题。

微信内部的浏览器是 QQ 浏览器，微信中的 QQ 浏览器跟我们 PC 上的浏览器有很大区别。特别是当我们做 web 开发的时候，会很明显地感觉到，PC 中调试好的页面，在微信中展示出来的却不是我们想要的样子。

本场 Chat 我们先从页面布局开始说起，看看微信中那些虐过我们无数回的样式，该如何去处理：

1. 移动端自适应解决方案该如何选择
2. 如何根据不同的设计布局，来制定布局方案
3. 常用的布局方案，在不同型号手机和系统中的兼容性问题
4. 微信桌面客户端
5. 微信中页面布局调试小技巧

文章开始，先带大家去简单了解一下那个让我们又爱又恨的：微信的浏览器。微信浏览器使用了腾讯的X5内核，是腾讯基于优秀开源Webkit做了优化之后开发的，这个浏览器是专门用在手机应用上面，目前已经向APP开发者共享腾讯X5浏览服务。在其强大的功能中，有几点跟前端开发者息息相关的特性：

1. 支持 css Animation、css Transition和css Transform：支持css3主要动画属性
2. 支持 JS RequestAnimationFrame：支持js动画，能够使用动画库
3. 支持音频/视频：能够播放音频视频，并且能够控制其属性
4. 支持 Canvas 和 Webgl：能够制作复杂的动画和小游戏
5. 支持 Touch 事件：能够进行交互

这些特性跟PC的浏览器没多大区别，并且功能还挺强大的。但是在我们开发过程中就会发现，没那么简单；单单是页面布局，就有很大的学问。

移动端自适应解决方案该如何选择

在开始做移动端项目之前，需要先解决一个问题：移动端适配。现在的智能手机五花八门，手机尺寸也是多得让人发紫，作为前端工程师，如何让页面在不同手机上面都能够正常地显示，是一件非常重要的事情。要做到这一点，就需要做移动端的兼容适配，那么该如何去选择移动端兼容方案呢，下面介绍几种常见的方法：

注意：一定要在项目开始前，就确定好到底要用哪一种方案，因为这决定了你在写 css 时候所用的单位以及计算的方法。

这里就不介绍这些方案的原理了，主要来讲一下这些方案的使用方法以及利弊，有兴趣的同学，可以去搜索一下“移动端兼容方案原理”。

• 百分比布局

使用方法：通过 css 设置，高度固定，宽度设置百分比。

优势：

1. 显示内容多
2. 手机端页面能够在 PC 上展示
3. 没有浏览器兼容性问题

劣势：

1. 屏