05. 尚硅谷_微信小程序_适配方案avi.avi原创

那么我们看完这个移动端的一些相关概念以后，我们来看一下小程序的一个适配方案。首先我们抛开小程序不疼啊，我先问一下大家移动端的适配方案，你们知道的有几种？Re是一种，这个必须要会，还有什么？嗯，百分比还有什么啊叫什么。不用怕什么啊，是不是不用怕他，你叫什么VW啊，其实就是不用画它嘛，是口嘛，是不用ma标签那个。对了吧，啊，当然是个你们是简称啊说的啊，其实比较常用的是V化的适配，还有什么我说的优化的就是他们。这不是你们说的VW吗？

OK，最常用的是re em m，还有什么适配啊，百分比其实用的不多，我它为什么不多？是肯定有一定的缺陷。有什么缺陷呢？百分比正常适配的话，好像就是等比缩放没有问题对吧？呃，有这样一种场景啊，有这样一种场景，比如说我在一个小屏幕上用了一张图片，这张图片本身的大小是20乘以20。那假如说我在一个设备大小是它两倍的一个设备上去投放这个页面，它说要放大一遍啊，那这个图片对应是多少呢？40乘以40，那如果说你的图片没有及时切换的话，这个图片本身是20乘以20大小，你一直给人家拉伸到40乘以40，导致有一个问题就是你的图片模糊发虚。懂吗啊，而比较常用的是我们的rem适配，还有优化适配。首先rem。

这个词本身它啥意思啊，什么是。嗯，R指的是root吧啊，Rem其实指的就是我们根元素字体的大小啊，而U的是K是干嘛的？让我们的布局是否等于什么？布局是否是什么知道吗？呃，我首先我问大家呢，这个视觉是否知道。什么叫视觉思考啊，特别简单好理解，你拿到你的任何一个设备，比如你们的手机，你看到了你的屏，手机屏幕的大小，其实就是你的什么视觉，视否视觉嘛，就是我们看上去的视口大小。

呃，什么叫布局视口呢？布局是否指的是你真正想在你当前的设备屏幕上去投放一个页面？而这个页面的大小我们可以叫做布局。是否。而我们说的布局视口通常要比你的视觉视口要大。可能说我们一个屏幕，你比方啊，比如说这是375。对吧，乘以667，我的布局是否有可能就是多少了750，或者说是980。你想我要把一个大的页面投放到一个比我小的一个视口当中，是不是有有有没有问题啊，你说。

有什么问题有滚动条，首先有滚动条是一方面，第二个你显示不完整。因为你就用户看到的就那么大嘛。而我们现在对这个要求越来越高，就是说我上面显示的必须是整个页面，而且在不同的积极上，是不是叫等比啊？哎，那这个时候呢，我们就可以用viewpoint适配去做，怎么做呢？就是让我们的布局是否等于视觉是否，首先布局是否等于视觉是否了，能给我们带来的第一个好处是什么呢？页面显示完整。对吧，页面显示完整的。啊，但是原本你打个比方，我这面是七百五的，我要投放到你375的屏幕上，那我整个页面按理来说是不是应该挤压了，那我如果说不做处理的话，上面的内容是不是看上去特别小啊，特别小。

啊，那这个呢，是我们后续可以去操作的啊，首先大家要知道一个东西啊，在F6下边，我们刚刚说一个东西DPR是不是等于二。DB又是物理像素比上设备独立像素，其实设备独立像素我们可以就认为它是什么像素，CSS像素来，我们算一个值在阿六下边。一个物理像素等于多少个？这。我说的是一个方向，咱们不要算整体。算吧，一除以多少等于二。这是不是0.5啊。那也就是说在F6下边我一个方向上，比如说水平方向上一个CS相左，就是EPS上边有几个物理像素点。

0.5对应的是一个吧，那假如说我这是一呢，是不是两个，然后呢，在在这个数值方向上是不是也有两个。所以说其实我们可以认为它一个像素在一个方向上是不是有两个物理像素啊。那首先在安六下边这个等式大家懂吧。一个物理像素是不是等于0.5PS啊？没问题。而小程序。它又推出一个单位叫RPS。这是小程序的一个计量单位，注意看它怎么去换算啊，其实特别简单，它的EPS等于什么？一个物理像素等于一个物理像素。

等于0.5PS。小程序里面特别好的是什么小程序呢？他已经帮我们做了适配，就是说大家不需要考虑适配的问题。最简单的一个例子，你们上班以后做移动端的项目，通常来说UI给大家的设计稿是多少呢？750。那七百五是什么？是我页面的宽度大小。那我现在需要你将一个七百五大小的页面是不是放到375的屏幕上。七百五指的是什么？我说是页面大小对吧，其实我们可以理解为这个页面上需要在水平方向上有750个像素点。懂吗？750个像素点。那现在我让你把七百五这个像素点放到375的屏幕上，三七五指的是啥？我们可以认为它是并于理解，我们可以认为这个三七五指的375个T。

那不正好是EPS上面应该有几个像素点才对啊，是不是应该有两个像素点啊？对，如果说大家以后去开发小程序的话，他给你的设计网七百五的话，那这个时候你可以用哪个单位用这个RPS。用它的好处是什么？你都不，你不需要你去做任何适配。为什么？你比如说设计稿上UI出路图，说我这需要个div是24乘以24对吧，那我问他你拿RPS去开发的话，你给个div写样式怎么写，快是多少，我说的是RPS。看这他俩这么像的的。

ERDX是不是等于一个物理相错，而我们这个设计稿是不是相当于是750个物理像素，那在这上边。打个比方，我需要24乘以24，你说我用RPS怎么想，是不是还是24乘以24呀，因为它俩不是对等的嘛，那在这上面是不是相当于是24个物理像素啊，这也是物理像素。如果说没有这个单位，你用PX怎么我应该是多少，嗯，你是不是还得去换算一下。12乘以12吧。这个能转弯弯吗？OK，注意，小程序里边我们更多用的是RPS，就是大家以后对着你们的设计稿直接写就行啊，直接写就行。

嗯。那这个时候啊，如果说大家出去面试的时候，或者是和别人聊的时候，需要你们去说的是什么，小程序的适配方案怎么去说呢？首先小程序底层已经做了这个V5号的适配。V炮的适配是什么？有一个Meta标签，这个知道了，它下面有个叫什么Y等于。对，YY就是宽度，是不是等于设备的宽度啊，而这个操作就是让我们的布局视口等于我们的视觉视口。哎，除了这个viewpoint的适配，你们一定要把这个说出来，它上面有一个计量单位叫RPX，这个公式我不需要你们把它记住了啊，这个没有任何逻辑了，记住它在MO6下边ERPS等于一，物里像素等于0.5PX。

嗯。来咱们再往下，再往下呢，这有扩展内容，我给大家说一下吧。有一个概念叫视网膜屏幕，听过吗？听过是吧？OK，那什么是视网膜屏幕，我们现在一般听过的叫什么液晶屏啊，高清屏啊。我相信听过视网膜屏幕的同学应该是不多。啊，首先视网膜屏幕是分辨率超过人类肉眼识别极限的。高分辨率屏幕。这个概念是谁提出来的呢？苹果公司。他们在安卓四发布会上已经提出来这个营销术语。那什么是视网膜屏幕啊，其实呃，大家重点是看一下这个吧，DP等于多少？DP等于二的时候是人类肉眼分辨的极限。

就是说dpir为二的时候，它那个分辨率是不是已经很高了啊，其实我们最早DPI是不是为一啊，为二的好处是不是分辨率高了，看不清晰了，但是大家要注意。这个DPR等于二是人类肉眼的极限。那现在我提一个问题，I6PLUS的D。嗯，三其他在网上是不是都是三啊，啊不知道，你们下面可以查一下，包括我上面也有。那我现在直接问大家个F6PLUS，它的DP等于三对吧。嗯，而我们F6是不是一边为二。我问了F6PLUS和f fo，这应该是F几啊，F6。他俩比我们看到哪个图像更清晰？

Plus有同学可能用过的时候用过的话说我很明显感觉6PLUS比六看着舒服呀，我先问你就是就是显示图像上谁更清晰。啊，你直接说六是6PLUS。咱不是说你就拿这个来分辨的话，你觉得谁来谁更积极。其实他俩是一样的。为什么呢？人类肉眼去看一个细微的东西，尤其是你在看像素点的时候，你是有一个极限的。哎，这个苹果公司他专门去做一个课研，就是说当我的DPI被二的时候。是你的极限，也说我的分辨率再小，这像素点再小也是看不清楚的。所以说按DPR等于三，其实给人的感觉和DPR为二是一样的。

记住了以后，哎，如果是有人问的话，你要说出来，有同学说，那我很明显感觉F叉，比方六看着清晰啊，是吧，那个跟那个其实不是，它显示图样清晰，很有可能是它的硬件设备坏了。什么硬件设备，比如说我那个显示屏换了。材料换的更好。那举个最简单的例子啊。老早的时候手机贴膜是贴那种两块钱一张的，知道吧，两块钱买一张，好像还能贴好几次。哎，会听的同学应该是自己填是吧，那现在我们买手机都是钢化管上来咔咔一按就行了吧。那之前两块钱买那种膜啊，如果说你不小心滑的，或者在地上擦了一下，你贴上去，你看图像清晰吗？那肯定不清晰了嘛，那就是跟你外界的因素有关系了。

还有同学说，哎，之前有班同学问我说，老师，这个肉眼分辨的极限，这啥意思啊？为什么我们会有极限啊？我视力很好，肉眼分辨肯定是有极限的，如果说没有极限的话，那还要什么显微镜这些干嘛？对吧啊，你能洞穿万物的话，那就不得了了，那人就那最简单，就没有什么美女了这些之分了，比如说哎，这个女的挺好看，为什么呀，我看了下她脸上的那个细菌大概有20万个，比别人少10万个啊，咱们以后就这种场景了，大家要记住这个啊，叫视网膜屏幕啊，视网膜屏幕这个是你们可以自己去和别人去交流的东西。你也可以反问他，哎，说这个DPR为三的真的比DPR的为二的清晰吗？其实不是的，它俩是一样的，好，那到现在为止呢，我们这些概念性的东西呢，就讲完了。