写在上面
作为一名程序员，当我收到美术MM的设计稿时，我心里一定回想一下，怎样才能通过程序完美的复制美术MM呢？ 渲染它下来^_^）。 因为无论是安卓还是苹果，每部手机都有固定的屏幕尺寸，而程序员要做的就是将美工的设计稿完美的呈现在不同的设备上，所以模型的适配至关重要。 所以，今天我想谈谈模型适配的问题。
首先我们都知道Android家族中会有各种各样的屏幕，并且没有统一的标准。 因此，在不同的设备上，我们需要根据屏幕的大小来对我们的APP进行更改。 比例柱的缩放过程也称为适应。 当然，和Android开发有点不同的是，使用HTML5开发不能使用Android或IOS原生开发的这些适配方法，只能使用Web端的一些适配方法。 以下三种是我接触到的适配方法。 我简单说一下我对它们的简单理解：（ps：如果有更好的适配形式、建议或者意见，请大大强调，非常感谢^_^）
px+ratio方法适配
在我看来，这种适应形式应该是最简单的。 长度全部按比例方式处理，高度按照设计稿给出的高度处理。 而且对各种设备都非常友好，但是我发现有一个问题就是设计稿的还原度不是很高，因为设计稿上应该标注的长度和高度都是px， （ps：找美工MM改变长度也是一种用比例来表达的方式，^_^）所以有时候页面的效果并不是很理想，毕竟设计者是根据每个像素和每个像素，然后我们得到最后几个像素。如果有几个像素的偏差，这样做仍然没有意义。 因此，我认为这些方法可以用于简单的应用程序或者对接口要求不高的接口。
视口表单自适应
这个方法可能有点难以理解，但是虽然还是很简单，但是我这里说的可能比较简单。 这些技术的具体应用大家可以自行百度。 下面我简单讲一下这些适应形式。
首先我们都知道HTML5上有一个标签，还有一个viewport属性
在制作手机网页时，会添加这样一段代码。 具体含义我就不解释了。 这行代码阻止我们的网页缩放。 我们可以做一些改变
我们改造后，网页长度固定为320px，缩放1.1倍html5 手机适配，那么320X1.2=384，是不是和我们苹果6的屏幕帧率差不多了？ 通过这个反例，我们可以思考：设计稿的长度是固定的，而我们在不同的设备上，根据我们不同的屏幕长度，缩放我们的页面倍数是否足够呢？ 这就是我们视口的适配原理。
这种适配方法如果想要适配不同的模型，还需要配合媒体查询或者JS动态估计。
使用媒体查询时，我们需要知道需要适配的屏幕的确切长度或范围。 一般情况下，使用该范围进行适配。 遇到特殊情况，可以单独处理。 也可以在页面未渲染时使用。
使用JS动态估算时，需要获取屏幕长度进行估算，然后根据估算的倍数准确设置页面缩放倍数。
这两种形式各有优缺点。 使用媒体查询比较麻烦，而且可能有一些规范我们没有考虑到。 使用JS动态估计会增加页面渲染时间。 我们都知道JS的执行会阻塞页面渲染。
雷姆适应
最后的适配方案也是我现在使用的一种形式，有优点也有缺点，让我慢慢啰嗦_
首先，我们都知道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，只要使用rem，整个html页面的宽高就会跟随font-size的大小了？ 那么如果我们改变html的font-size，整个页面也会改变吗？ 这就是我们的rem适配原则。
通过刚才的简单讲解，大家应该已经了解了rem的适配原理。 最重要的是如何改变font-size的大小。 同样，我们有两种形式，媒体查询和JS动态估计。
媒体查询就不说了，因为它和视口适配形式类似，就不赘述了。
JS动态估计肯定是估计我们html的font-size。 刚才我们以720的设计稿为例，但是我们要思考一下。 手机屏幕只有375，这个时候我们该怎么办呢？ 简单的物理问题，相信你能想到，比例缩放。 x=375*100/720，此时x就是我们的font-size。 当我们的font-size发生变化时，整个页面上rem所代表的元素是否也会随之变化呢？
当然，这种方法效果不好。 我想你应该猜到了，它会加强HTML渲染的估计，但对于现在的手机来说，这并不是什么大问题(^_^)。 经过我的一般测试，Android 4.4以上的手机应该没有问题。 该方案也是很多混合开发的APP或者WEBAPP采用的适配方案。 但还是有很多限制，我就不一一赘述了。
多说一句：很多人也用rem来表示文字大小（当然也包括我，偷懒^_^）。 事实上，正确的字体适配应该使用媒体查询加em来完成，因为rem估计的大小在各个设备上可能不一样，屏幕上的字体可能会模糊或有毛刺。 如果应用程序需要高精度，您可以考虑单独调整字体。
后记
通过三种适配形式的讲解，相信您已经对每种适配方式的优缺点有了简单的了解。 开发过程中使用哪种形式，其实更多的是需要根据我们的项目来选择。 每种适应方法都有各自的优点和缺点，所以我们应该灵活选择。 最后我想说的是，三种形式我都用过，但我认为最后一种形式是一种改编形式，可以完美还原美术设计稿。
以上内容只是您自己的学习过程。 欢迎您取其精华，去其糟粕，找到适合自己的学习状态。 如果您对以上内容有不同的介绍或者想法，欢迎一起阐述。
企鹅号：1041415167 邮箱地址：zth1041415167@outlook.com
附部分学习资料地址：forked from dcloudio DCloud开源项目合集问答社区 rem适配JS库（淘宝试用方案）forked from amfe/lib-flexibleMUI框架视频教程地址
（ps：以上内容可能会不时更改和更新，距离上次更新已经过去很长时间了，一方面是因为之前时间比较忙，另外一个原因是我最近变得懒惰了^_^html5 手机适配，下一篇笔记会简单讲一下flex等页面布局，近期会更新，希望感兴趣的朋友多多关注！）
