移动端网站适配方案
前言：在移动互联网普及的今天，现有很多公司把公司的侧重点放在了移动端上，对于开发人员来说，能够拥有一套响应式的解决方案，能够高效、快速的完成产品的开发，如今响应式的解决方案有很多，比如早先的百分比布局、再到CSS3的弹性盒子布局，部分人喜欢使用HTML5的meta标签动态的修改网页的viewport的方式实现响应式，但是这种方案适合做一些单屏并且固定比值的应用，今天我要介绍的这种适配方案是我借鉴了 TB 的web app 适配方案做出来的。好了，让我们开始吧！
本文的适配方案的核心思想是动态修改CSS3的 transform:scale 属性实现页面的缩放，从而达到适配的效果。 CSS3的到来，使得前端开发者迎来了春天，CSS3所带来的一些新奇的样式使前端开发者们不在依赖JS、flash的前提下，做出炫酷的动画效果，其中就有我们今天要讨论的scale属性， scale的作用是可以将元素缩放尺寸，scale分为scale、scaleX、scaleY、scale3d这四种属性，通过名称就可以开出来，他们各自得的作用，我们今天主要用的是scale属性，表示以元素的中心点为基准整体缩放元素，看到这里大家可能会有些疑惑，单纯的使用scale如何才能够做页面的整体适配呢，对，单纯的CSS3是不足以达到整体适配的效果，所以，我们需要通过Javascript动态的修改scale值已达到适配的效果。
首先我们需要做的就是如何动态修改scale值， 在这里大家需要搞清楚一件事情，那就是scale的缩放比例和屏幕的尺寸之前有什么联系，这也是我们这篇文章的主要内容。
第一步：我们需要指定web app最大适配尺寸，也就是我们最大需要显示在多大尺寸的设备上，这里以ipad的尺寸为该款应用的最大适配尺寸。
第二步：计算出屏幕的尺寸所占元素的比例，例如屏幕的尺寸减少20像素对应是元素的多少倍，这里有一个公式可遵循 缩放比例 = 屏幕宽度减少的尺寸 / 元素宽度的总尺寸（我们指定的应用最大适配的屏幕尺寸） 计算出来的尺寸就是减少的尺寸对应的缩放比率，最后将该值从元素的默认缩放比例中减去即可。
第三步：做到这里大家会发现一个问题，那就是虽然元素按照屏幕的尺寸自动缩放了，但是元素的底部会出现空白区域，这就是我在这节要解决的问题，出现这个问题的原因是因为我们使用的是scale整体的缩放，虽然元素缩放了，但是元素还保留着缩放前位置尺寸，那如何解决这个问题呢？ 很简单，只要我们将我们之前的公式稍加修改就能够解决此问题，我们要做的是计算scale缩放后减少了多少高度，计算完成后只需要在父级容器中减去减少的值即可。 公式：父级元素的高度 - （父级元素的高度 * 缩放比例），这样一来就可以计算出来元素在缩放完成之后告诉减少的值。
以上就是全部的内容，由于本人也也对移动端的响应式布局没有理解的那么深刻，所以本文也有很多不足之处，望大家谅解！
