浅尝MUI-HTML5机型适配问题

写在前面

  作为一名程序员，在拿到美工MM的设计稿时，脑海里肯定回想，怎么才能完美的将美工MM通过程序给copy出来呢?（ps:开玩笑，将美工MM的设计稿完美的用代码呈现出来 ^ _ ^）。因为不管在安卓还是苹果，每款手机都有一个固定的屏幕尺寸，而程序员要做的是将美工的设计稿完美的呈现在不同的设备上，那么对于机型的适配必不可少。因此，今天就想来谈谈机型适配方面的问题。
  首先，我们都知道，在安卓的大家庭里面各种各样的屏幕都会有，是没有一个统一的标准的，因此，在不同的设备上，我们需要根据屏幕的大小来对我们的APP做等比例的缩放处理，也就是所谓的适配。当然，和安卓开发有一点不同的是，使用HTML5开发是不能使用安卓或IOS原生开发的那些适配方式，只能使用web端的一些适配方式，以下三种是我接触过的适配方式，我就简单的和大家谈谈我对他们的简单理解：（ps：如有更好的适配方式，建议或意见还请各位大大指出，感激不尽^ _ ^）

px+百分比方式适配

  在我看来，这种适配方式应该是最简单的，将宽度全部使用百分比的形式处理，而高度根据设计稿给出的高度来处理。并且对于各种设备都是挺友好，但是我发现有一个问题就是，对设计稿的还原度不是很高，因为设计稿上应该标的宽度和高度都是px，（ps：找美工MM把宽度改成百分比来表示也不失为一种办法，^ _ ^）因此有时候得到的页面效果不是很理想，毕竟设计者是按照每个像素每个像素抠的，然后我们拿到后几个像素几个像素的误差来做，还是有点说不通。因此，我觉得对于简单的应用或者对界面要求不高的界面可以使用这种方式来做。

viewport方式适配

  这种方式理解起来可能要难一点，不过其实还是很简单的，我这里讲的可能比较的简单，具体的这种方法的应用，各位可以自行百度，下面我就简单的说说这种适配方式。
  首先我们都知道HTML5里面有个 标签，并且有个viewport属性

  在做手机端网页的时候，都会加入这样一段代码，具体的意思我就不解释了，这行代码让我们的网页不进行缩放，我们可以稍微做点改变

  经过我们的改造后，让网页的宽度固定到了320px，并且缩放1.1倍，那么320X1.2=384,是不是和我们的苹果6的屏幕分辨率差不多宽。通过这个例子，我们可以思考：设计稿的宽度是固定的，而我们在不同的设备上，根据我们不同的屏幕宽度，缩放我们页面倍数是否就行了呢？这就是我们viewport的适配原理。
  这种适配方式想要适配不同机型，还需要搭配媒体查询，或是JS动态计算。
  使用媒体查询时，我们需要具体的知道需要适配的屏幕精确的屏幕宽度或者范围，一般是使用范围进行适配，当遇到比较特殊的情况再单独处理，还可以在页面未渲染时，
  使用JS动态计算时，需要获取屏幕宽度做一个计算，然后根据计算到的倍数精确的设置页面缩放的倍数。
  两种方式各有利弊，使用媒体查询比较的麻烦，并且可能有些尺寸我们没考虑到，而使用JS动态计算，会降低页面渲染时间，我们都知道JS的执行是阻塞页面渲染的。

rem适配

  最后一种适配方案，也是我现在使用的一种方式，也是有利有弊，且听我慢慢唠叨^_
  首先我们都知道em和rem，并且我就默认大家都知道这两个单位是干嘛的了（不知道的可以自行百度哟）我们要做的事是什么呢，将网页的根元素的font-size设置一个动态计算到的值，然后将页面上所有的尺寸换成rem来处理，简单的说就是
将html设置为font-size:100px，即100px=1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
  比如我们的设计稿是720X1280，那么720/100=7.2rem，如果我们有一个元素的宽度是占满整个设计稿的，那么我们是不是就可以设置他的高度是7.2rem了呢？此时是不是就能够完美的还原设计稿呢？那么这样和我们的适配又有什么关系呢？
  我们刚刚说了，当我们的设计稿宽度是720px，html的font-size:100px，整个html页面的宽高等只要使用了rem的是不是都是跟着font-size的大小变化的呢？那么假如我们改变html的font-size的大小，整个页面也跟着改变了呢？这就是我们的rem适配原理。
  通过刚刚简单的解释，大家应该已经懂了rem的适配原理，最重要的肯定就是怎么来改变font-size的大小，同样，我们有两种方式，媒体查询和JS动态计算。
  媒体查询我就不多讲了，因为和viewport适配方式差不多，就不多做赘述。
  JS动态计算，肯定是计算我们html的font-size大小，刚刚我们是以720的设计稿举例，但是我们要思考，手机屏幕只有375，这个时候应该怎么办呢，简单的数学问题，我相信都能想到，等比例缩放嘛。x=375*100/720，此时的x就是我们的font-size大小。当我们的font-size大小变了，整个页面使用rem表示的元素是不是也就相应改变了呢。
  当然，这种方式有个弊端我想大家应该还是猜到了，会加大HTML渲染时的计算量，但是对于现在的手机来说，问题不大（^ _ ^）。经过我大概的测试了下，对于安卓4.4以上的手机来说，应该都是没有问题的，此方案也是许多混合开发的APP或者WEBAPP采用的适配方案。但是还是有很多局限性，就不一一赘述了。
  补充一句：很多人对文字的大小也使用的rem（当然也包括我，偷懒 ^ _ ^ ），其实正确的字体适配应该使用媒体查询加em来做，因为rem计算出来的大小可能在某些设备上会出现字体模糊或者有毛边等现象，如果对应用的精度要求很高，可以考虑字体单独适配。

后记

  通过对三种适配方式的讲解，我相信大家对各个适配方式的利弊都有了简单的认识，具体在开发过程中使用哪种方式，其实更多的需要根据我们的项目去选择，每个适配方式都有自己的优点和缺点，所以我们应该灵活选取。最后，我想说的是三种方式我都用过，但是最后一种方式我感觉是最能完美还原美工设计稿的一种适配方式。

  以上内容仅为自己的学习过程，欢迎大家取其精华，丢其糟粕，找到自己的学习状态。若对以上内容有不同简介或看法，欢迎一起探讨。
企鹅号：1041415167 邮箱地址：[email protected]

附部分学习资料地址：

1. forked from dcloudio DCloud开源项目集锦
2. 问答社区
3. rem适配JS库（淘宝试用方案） forked from amfe/lib-flexible
4. MUI框架视频教程地址

（ps：以上内容可能会不定期修改更新，距离上一次的更新已经很久了，一方面原因是前阵时间比较的忙，还有个原因，最近变懒了^ _ ^，下一篇笔记将会简单的谈谈flex等页面布局，并且在最近更新出来，希望有兴趣的小伙伴多多关注！）