移动端专题系列（一）移动端布局

目前为止，移动端的布局想做到适配各种机型，我总结出了两套方案：

##第一种方案

<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />

强制让手机浏览器按640的比例来呈现网页，让浏览器去做尺寸适配，简便易行，适用情况:

网页设计仅针对手机屏幕，并且没有需要根据手机屏幕尺寸进行UI调整的内容，即没有媒体查询的CSS
产品层面可以不考虑非主流设备或浏览器的兼容性，例如黑莓的某些设备或搜狗浏览器这类的不支持640定宽渲染的浏览器
当手机横竖切换时，能够容忍部分手机在横屏浏览网页时，可能出现的问题(潜在问题)。

优点：绝大多数的场景都可以支持，而且开发起来简单高效，不需要考虑各种尺寸和样式表的单位换算问题。

##第二种方案

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

这个不用解释了，绝大多数知名网站都这么做的，但是为了能够让图片和字体去做自适应，通常的做法是使用rem来作为单位，然后再启用javascript判定屏幕宽度，动态改变html元素的fontsize。

$(window).on('resize', function() {
    var width = document.documentElement.clientWidth;
    $('html').css('font-size', (width / 640 * 32) + 'px');
}).triggerHandler('resize');

关于rem的使用及注意事项，可以参考腾讯ISUX的 web app变革之rem ，现在淘宝，携程，亚马逊等公司都在广泛使用rem，也行会成为未来的标准呢。

rem确实很好，这里值得讨论的是，html的font-size到底取多大适合？

我曾经取过20px。如果UE给我的PSD是640宽。那么原图上一个200px的div，则为200/40=5rem。我也取过100px等值，归根结底，都是为了更好的进行计算或者说转化单位。但是实际中很多单位并不是整数，在单位转换中就会耗费大把时间，此时，gulp/grunt该出场了。这将在后续篇幅的自动化工具中给出方案。

还有个不容忽视的，就是背景图如何处理。一般为了减少请求，我们最后会用sprites。但如果用rem方案，就不好弄了。我们开发时候，一般是针对单张背景图设置：

background-size:cover|contain
background-size:100% 100%

如果使用sprites就必须同时缩放背景图，也就矛盾了。这个问题也将在gulp解决方案中进行探索。

总结下，第一种方案有点投机取巧的感觉，第二种虽然麻烦写，但是健壮性，可拓展性都会好一些。

##不同机型的特殊处理

1.背景色平铺，rem作为单位。
2.用css3媒体查询

rem并不能解决所有问题，现在很多手机宽度一样，但是由于手机自身封装了按钮(华为)或者app的浏览器自身加了toolbar(手机百度)，导致同样的高度算出来的font-size在这些情况下会出现不兼容的问题。此时我们可以使用css3的媒体查询。一般原则是，改变布局来兼容。特出情况下，比如屏幕太小，可以直接将不重要的区域干掉。

//屏幕高度太小的特殊处理
@media only screen and (max-height: 460px) {
    .prize {
        footer {
            position: static;
            transform: translateX(0);
            margin: 0 auto;
            margin-bottom: 8px;
        }
    }
}

3.利用类覆盖
原理就是通过js计算屏幕高度，然后增加特定的class.

var bh = $(window).height();
if(bh<420){
    $('body').addClass('low-screen');
}

4.最后大招
transform:scale被缩放元素
display:none

总之兼容问题并没有一个一劳永逸的方法。只能自己多写然后多遇坑，而后解决之。其实移动端做多了我们会发现，最大的问题不是解决兼容性的方法，而是过程，试想下，十几部手机放在你面前，你如何才能高效的调试？后续会给出解决方案~~