04. 尚硅谷_微信小程序_移动端适配相关内容.avi原创

来还有一个，呃，第34.3移动端适配啊，那这个东西呢，呃，在我们学小程序之前呢，也是大家应该去掌握的一个东西，因为现在我们办个前端开发的重心在慢慢的去朝移动端的方向去转移，可能以前比较火的什么PC端。新阶段。那个时候你别说手机了，就是大家电脑或者手机都加起来啊，都不是那么很普及，而现在你在人手一个手机啊，而我们很多的操作，包括说大家的网上一些金钱的交易，都是通过手机端去完成的，所以呢，它的重心在慢慢的朝移动端去转移。那么在移动端的这个方面，需要大家去了解一些适配方案，以及一些相关的理论知识，比如说第一个叫物理像素，那什么是物理像素？

实实在在的一个。电脑。其实特别简单，一个物理像素是不是可以认为是我们电脑的分辨率啊？分辨率。当你们买那个，不管说买电脑，买手机或者买电视的时候，它都有一个参数叫分辨率。对吧，那分辨率的高低能说明什么？哎，对清晰度分辨率，按理来说分辨率越高的话，是不是咱们的这个屏幕看上去越清晰啊啊，大家可以记住它物理像素其实可以就认为是我们屏幕的分辨率。嗯。它的是控制显示的最小单元。哎，显示的最小单元，我们就可以把物理像素看成是对应的像素点。像素点，你说我们在屏幕上看到的一张图片，它是一张完整的图片吗？是一个整就就是一个东西吗？它是由一个一个像素里数拼接起来的，哎，拼接起来的，哎，这是物理像素啊，你们需要了解这个就OK。

啊。那在我们移动当中还有一个叫设备独立像素，以及大家最熟悉的叫CSS像素。对吧，那我为什么把这两个放到一起呢？首先我们来先，呃，先来看一下这个设备独立下载。它是和设备有关系的。啊，可以认为是计算机系这个坐标中的一个点。哎，一个点，而这个像素，注意它是一个什么像素啊，虚拟像素。啊，其实在移动端有很多的概念性的东西啊，在我看来没有太大的用处，没有太大用处，比如说这个设备独立像素啊，CS的像素啊，包括大家去布局的时候有什么布局是否对吧，视觉是否啊这些。

就是概念性的东西特别多啊，其实这个设备独立像素在某种意义上我们可以认为它等同于什么CSS像素。而且要注意他俩都是虚拟像素，也就是说我们平时写的那个几个像素，几个像素它实在实际上是存在的吗。不是。我打个比方，我问一下你，我说你告诉我十个像素是多长，你给我量一下拿手能量出来吗？量不出来，可能我问你十厘米多少，哎，你大概呢，不管准确与否，大概能比划一下。我说你给我比划一下，100个像素你肯定量不出来，因为它不是实际存在的。不是实际存在的的，而我们的物理像素才实际存在的。

下面这呢是给大家去，呃呃，有一个DPR学过吧，那什么是DPR呢？设备像素比。对吧，设备像素比，那这个东西啊，就算之前大家忘了没关系，时间长了忘了很正常，现在把它记下来，什么叫DPR，来我们来看叫设备像素比。你说的像素比，那是哪个像素比哪个像素呢？物理像素比上我们的设备独立像素等于DPR。而我们在实际开发当中一般参照的是什么？IPHONE6的尺寸。在M6下边，它的DTR等于二，把这个记死了。等于二。哎，我再强调一遍啊，DPI叫设备像素比，注意它是物理像素比上我们的设备独立像素。

OK，那我们再来往下看，那这两个东西可能大家应该是没接触过啊，这个作为一个扩展来给大家说一下啊，其实我们更多关注的是下面这个叫PPI。而什么是PPI呢？以英寸显示屏上的像素点个数。一说到像素的个数是否和物理像素有关系？而这个英寸的话，我相信大家应该也能理解，它是一个长度单位。比如说我们买手机啊，我说你把你这个手机4.7的。5.5的这个是不是就是说的说的这个因素啊，我问下呢，是从哪到哪的距离，对角或者叫斜边的距离吧？啊OK，来我们来看一个我下面的给大家列了一些图啊，就拿M6的这个为例，注意它的屏幕大小是4.7英寸的。

而在F6下边，它的物理像素。多少呢？其实也叫分辨率叫750乘以1334，那我们先来看第一个，这是物理像素对吧？物理像素那这个呢，Logic point。这这个叫什么。像素点其实叫这个就是设备独立像素。哎，多少呢？375乘以667，先来看第一个物理像素比上设备独立像素等于多少，是不是等于二啊，所以它的DPI2:2，我们再往下看，大家看一下它的PPI是326。啊，现在我把已知的条件告诉你，会会求这个吧，斜边上的像素点，那我这个物理像素为已经告诉你了，是这边你比如说啊750，那这边就是1334，我让你求斜边上一英寸上边物理像素点会求吗？

啊。求斜面的长度和什么？这个你们肯定学过了，都忘了是吗？怎么有的D乘以高除以二好对平方和，然后开根号对吧？那我们可以验证一下啊呃，我们找一个计算器，首先我得算一个东西对吧？算什么呢？你比如算个750啊是不是平方吗？走，大家把这个数记住，它叫562500对吧？OK，还有个1334平方。

加上562500是这个值对吧。接下来我是不是要开灯了，点下它走。然后呢，我算完了吗？没有，这是不是算出整个斜面上的像素点，然后注意它一共四点轻音数嘛，所以我们要除以4.7来看一下，大概是325多一点出点头，呃，所以呢，它四十五十度的话，是不是326，嗯，326，那这个我为什么要提他呢？也有很多的这个设备，它参考这个PPI的值。嗯，G的值越大，也能证明我当前这个屏幕的这个分辨率高。你想嘛，如果说同样的尺寸大小的屏幕，我上边的这个PPI的值高，证明什么我的物理上浮点个数多嘛。

那下边这个DPI这个就大家作为一个了解就行，这个跟我们没有太大关系啊，DPI呢，最早指的是打印机上面啊，单位面积上打印的这个墨点数。那我们打印机也有的设备打印的特别清晰，也有的打印的不清晰啊，这个呢，他们参考的这个值叫DPI。下面这些图呢，大家你们留着下来，有一些数据，兴许你们开发的时候也能用上它，也能用上它。那再往下呢，这也是给大家去列了一些东西啊，这也是一些图，你包括它的尺寸啊，下边这个分辨率啊，以及PPI的值啊，哎，都给大家列出来。OK，那这个是移动端适配相关的一些概念，是什么东西？嗯，在再停一下。