11_尚硅谷_谷粒音乐等比问题.wmv原创

OK啊，然后我找两个实际的东西给你们看一下啊，你们看这个理论能不能接受，好，我去找我们正常移动端开发时候，我们拿到的设计图看一下。好，你们看到过这种设计图。好，来，这些都是以后移动端的设计图。来看一下他的尺寸为多少？七零乘以六。为什么要把移动端的设计图设计成750乘以1336？七零这个数字不敏感，他是什么？他是什么？零乘以136，他是I6的物理分辨率，是不是也就说IONE6。

整一款手机就有七百五乘以1336个物理像素点。好，这是不是一张图片，图片什么像素？位图像素，为什么位图像素要设计成跟IPHONE6的尺寸？呃，I6的分辨率一模一样，1:1。一个位图像素对应到一个物理像素，才能完美清晰的展示。这个时候你在设计图上量出来的所有的尺寸，到iPhone量上面去写的时候。百分百没问题。是最最清晰的。一般我们移动端做设计的时候，都会拿一个设备，都会拿一个设备做基准值，这个设备是。IPHONE6。那么讲只要去移动开发。像素比为二的手机里面，最最典型的就是IPHONE6说，基本上所有的UI出设计图的时候都会是七百五乘以。

1336。这个时候问你，我从这张设计图上面切下来的图。放到IPHONE6上面去。一个位置像素正好对应一个位置像素，如果你设计图是瞎设计的。你从这张设计上面去切下来的图放到IPHONE6上面去啊，有没有可能是，这有可能是。能不能讲好，可是你现在这张七百五的图，我问你，你把它放到IPHONE5上面去的时候会不会失真？这张设计图上面切下来的图，你放到IPHONE5上面去会不会失真？不会只会锐化，什么叫锐化？你一个位图像素可能会占据多个。物理像素，这就不用管，锐化，用户基本上开不出来。

除非你失真懂不懂，那我就问你，从这张设计稿上面切下来的图放到6PLUS上面去，会不会失真？会是。会很虚，要不要为IPHONE6PLUS单独的重新去设计图？要不然在IPHONE6PLUS上面会失真的。是不是看一下。最终咱们拿到了图。几套？这都是从设计上面切下来的图，总共几套？两套一套叫差。像素比为20度用的。一道叫三叉像素比为三的手机用的。是不是啊？为什么要设计二插图三插图啊？要不是为什么要设计2353大图啊。刚刚咱们说了吗。你你没有三插图，你到IPHONE6PLUS上面去会不会失真，肯定会失真，像这个品牌就是从这个嘛，就是从750张上面干。

切下来的。你有没有看到这张图，肯定是什么750的。从这上面切下来的，问你这个东西从这个上面切下来，我问你放到哪一款设备上面去，是完美展示的I6放到IONE4上面去有没有问题，没有问题可能会绿化，绿化用户基本上。看不出来的，懂不懂，好，我问你好，现在我看到这两张图。看二的大小为多少。60乘以36，你告诉我。这张是不是这张背景图啊。我在写是不是有一个div肯定要去放这个品牌的，这个的尺寸你准备给他设计成多大？二插图是在像素比为二的手机上面用的。

二。你的位图像素是60乘以36，说明你这个div里面应该包含多少个物理像素？乘以36个物理上数，不然你没有完美，没有办法完美进行的展示。想想你现在这张图大小是乘以。是不是60乘以36个位图像素，你想让这张图去设备上面完美清晰的展示，如果你手机的像素比为二的话，我问你啊，你这个时候应该拿一个多大的容器来放它？还是刚才问题吗？像素比为二的手机上面。首先确定下来像素比为二，而且我加面的标签了，肯定是已经加完的标之后才问你的，真的加完的标之后，现在你拿到了一张二插图，是60，以说明待会那个容器放这个二插图的，他物理像素必须得是60以六个。

嗯。这能确定你这个容器的物理像素必须得是六乘以个是不好，这个确定下来了，首先你容器六乘以六个物理像素，像素比又为多。这个容器放到物理像素的点数，60乘以六个像素比为二，这个容器的C像应该不多。乘以像素比为二的手机，上面一个八的容器放多少个？物理上说。36个。

像素比为什么叫像素比啊？物理像素的一行一个方向上面物理像素的个数比上独立设备像素的个数等于二。因为你写了面的标签Y等于d device啊，你就可以认为独立设备像素就是啊，CSS像素相当于像素比是什么概念？加上V的这个面标签之后，像素比就是说一个方向上面你所占的物理像素的个数比上csi像素的个数等于二。是不是，你想想，那现在我一行上面应该放个物理像素吧，用几个像素。30个码。是不是OK，那我问你下一张图是三叉图。

告诉我这个尺寸为多大？位图像素为多少？这应该是三二十二上一百二三十这个数二。不是，我就问你，现在这张三差图，你能想象出来？三张图的位图像素是多少乘以多少吗？就是这段。90乘月。你看我先看二插图啊，大家先看插图，二插图的尺寸是60以十，说明你页面上的容器是30乘以乘以18个三像素，问你三叉图应该设计成多大？是不是看一下。九乘以50是不是OKUI给你图的时候大家看。

很稀奇的一个事情，给你图的时候标注里面。其他信息它都有标。看到没有多高，间隔多少马丁多少都有给你标这个品牌这个东西。有没有给你标高宽。没有考你呢？品牌就是没有给你标高宽，可是图给你切完了。图给你切完了。容器的大小能不能算出来？30乘以18嘛，是不是啊，你夸张，你保过去说有啊，说你这个标注度不行，高宽都没有标出来。那指不定是谁喽。能不能理解人家图帮你切好了，自己自己去算。是不是啊，能不理解。

那讲要不再来一遍。再来一遍，是不是OK？正常的推理是什么？正常推理应该是这样的，正常推理是UI，其实已经自己量过了。已经量过了啊，他要知道在页面上去的话，这个CS就应该30乘以18。是不是在页面上面就应该是一个30乘以18的一个C，就这一个吗？一个div去发这个背景的。是不是，然后他考虑一个位置像素要对应上一个物理像素吗。是吧，那怎么办？那要设计两套图，像素被为一的时候啊，其实按照正经来说，应该设计三套图。下数比为一的时候就应该是什么。30乘以18的图像数比为二的时候，就是60乘以啊。36的图像数比为三的时候，就应该是90乘以啊。50度为什么自己想一个十三十乘以18单位什么？现像素，是不是如果你所有移动端的东西都准备好一个30乘以8CS像素的一个容器？

在像素比为一的手机上面。占据多少个物理像素？你想完美清晰展示的1:1吗？是不在像素比为二的手机上面像完美进行展示，它应该包含多少个物理数？60乘以36嘛，相数为三九十乘以。54码。能不能理解，不管怎么推，正推反推这个。都能推出来的，就看你思路怎么样了，要没讲好，现在想想。做移动的开发，如果你像素不懂，时刻不懂，你连图都看不懂。怎么画？你连尺寸都干嘛算不对？你咋整？啊，学会移动端布局之后，画移动端页面比画PC页面简单。为什么元素少？屏幕本来就少，元素少，可是从技术上来讲，移动端比PC端要难得多。

从工作量上来讲，它比平常要。少得多。从薪水上来讲。画云端页面，薪水肯定要比PC高。能不能理解啊，OK，这是一个点，好，就是从这个设计上，咱们咱们出手啊，引申出来的问题啊，如果没有今天这一一套体系的梳理的话，打死你都什么看不懂。啊，以后出去开发，经验一看就看出来了，你没讲啊，今天的东西一定要把它吃透，以后拿足的时候就不虚啊，有人问你。啊，你这个图要切多大啊？理直气壮的告诉他切多大，为什么这么切？是不是啊，别意外，说切多大随便那就随便了，懂不懂啊，OK好，那这是图的问题，OK好，最终说一个等比问题啊，这里面其他东西有问题的单独过来问我。

啊，不在课上再花单单独时间去讲了，OK，那这是就是我们今天讲的东西最后一个点，我们来看等比问题。好。好，我们来看等比问题。嗯，怎么去看这个问题。好，最终来一个吧，等比问题。好，这个等比跟我们这个适配有着很大的关系，好，这是为下一堂课去做准备的等比。好，我们来看，现在没有加密的标签。是不是啊，我来个div，这个div直接靠过来了。好，Ctrl a ctrl c直接扣过来，Ctrl a ctrl v ctrl s，我现在是是490个像素啊好问你好，看着现在没有。好，F12。这是什么设备？IPHONE6，再看CTRLCCTRLF12。

这什么设备？IPHONE5是不是走你再来看。F上。这是。IPHONE4是不是我问你这个红色这个区域。在这个三款设备上面，大小一不一样。你看我把它全部生成75%。一不一样不一样，问你是不是等比的。是。是不是等比的，默认情况下不加面的标签，是不是等比的，是等比的吧，好看，如果加上M的标签呢？我加他们微信。CTRLCCTRLVCTRLDCTRL好，这里刷一下，好九九百有点大了是吧，给个两两百吧。

刷一下IPHONE4是不是这样的好，只有你再来看。IPhone。五。OK，再来看。IPhone。六。刷一下，好，我问你，大家来看。能比吗？一。等不等，比不等比，大小是一模一样的，好想想，如果你整个移动端体系全部搭完了。不同设备上面相同的块，你给了相同的三像素，最终去成像的时候该不该一样？大小该不该一样？不该一样，这叫什么事啊？

一个快，我设这个大小就是200乘以200的去不同手机上面这个物理尺寸最终吗？最终算到多少厘米你还不一样。那是不是会出问题了，对啊。是不是你想想啊，这个逻辑重新梳理一遍很重要，听一下，OK，我们说移动端整个体系全部搭完，什么叫整个体系全部搭完？你面标签写的很准，几个建筑队全部写完了，是不是移动端整个体系出来了？好OK，现在我给一个div设置高，高宽200乘以200。不同设备上面，最终它占据的实际的物理尺寸要不要一样？你不一样，这叫什么事情啊？是不是必须要一样吧？好，接着第二问题。占据的实际的物理尺寸一样，这个物理尺寸我们设的是厘米、英寸这种单位的好问，你现在一动，整个体系全部答完。

是不是OK 200乘以200的一个元素单位，像数。所包含的物理相数的个数一不一样。怎么不一样了？看什么看像素。是不是你200个乘以200个像素，到底占多少个物理像素？这个时候就能看像素比了，像素比是一样的，你所包含的物理像素个数都是一样的，像素比不一样，你所包含的物理像素个数就是啊，不一样的。可是不管你像素比是多少，最终算到多少厘米，是不是都是一样的。那我问你，是不是不同设备之间物理像素占据的实际的尺寸是不一样的？能理解我的话吗？是不是好像我们第一次讲一个设备出厂的时候，他所包含的物理加数点数。

以及这个物理像素点数到底占据多少厘米、多少英寸，这是固定住的是不是？可是又说了一句话，不同设备之间。物理像素这个点数占据的实际的运算厘米有可能是不一样的。是不是，现在能不能你说呢，是不是啊，OK好，那现在不加没的标签等不等比等比，加了没的标签等不等比不等比等比，是不是我们必须要的需求。等比是不是我们必须要的需求？等比是不是我们要的必须的需求？大家想想是还是不是啊，很正常，这很正常，跟着思路走没有任何问题啊，很正常，说等比是必须得，呃，是不是必须需求的，因为他觉得我们写的这个面条标签最终干嘛。

不是没有没有等比吗？都一样的嘛，他觉得哎这个是必须的是不是，其实你想一想。我们现在画前端页面。目的是什么？百分百还原设计图。给你一张设计图之后，你在设计图上面一个元素占这张设计图的比例，要不要百分百的还原到设备上面去，本笔是不是一个必须的需求？必须吧？问题是加了面条标签还等比吗？不等比了怎么办？适配，OK，好，适配概念出来了，适配是为了什么目的？适配是为了让你在加上M的标签之后实现等比效果。是不是有同学就问，不加面的标签就已经等比了？

你干嘛还要这么干？你要是不加密的标签字小到比蚂蚁还要小，你能看得清吗？看着走，你22。我现在干嘛全部关掉。我说3W点艾点。com是不是F不是要过来IPHONE6吧。不管你去什么设备上面，都应该百分百的看着这整个一个站点。是不是字小不小。你看我再来CTRLC。F上改成IPHONE5 CTRL走你。你看这是不是，诶，他直接跳了是不是。是吧，那这样。我先我先不变3W点艾特点com码。移动版吧，啊不，PC版吧，只有你过来。

周你手机版吧。是不是只要你你你不刷新，你大家看等不等比的。等不等比的。肯定等表。肯定能比啊，是不是啊，你想啊，现在我这个三个五占据你整个页面的百分之多，是不永远都是一样的。是不是肯定等比的吧，可是有一个什么问题啊。字太小了呀，你看得清吗？看不清啊，是不是真正移动端的站点长成什么样一刷。这才叫移动端的站点吗？你这是不是可以看清啊，是不是OK来看有没有的标签。有没有，有吧。那我问你。现在这个等比效果。大家看是不是一个等比的。等比的吧，如果你光加一个面料标签，其他东西什么都不做，会出现这种效果吗？不会，你光加面料标签，我就课程中心这几个字应该是一模一样大的。

是不是啊，现在肯定不是这样大的。那么讲它肯定是一个等比的。懂吗？好，那就要我们用技术手段去实现这个。等比啊，唯一的目的是百分百还原设计图。啊，也就是说在有没的标签的情况底下，你要让你的网页在不同的设备上面都是等比的，这就叫。适配，这是移动端布局最难的。一个点怎么去进行适配也是最基本的，你做一段页面就得做适配啊，之后适配方案讲三种。百分比适配。I配VI配用的最多的。Ian。啊，跟我们的R单位有关系。啊，可是讲适配没有今天的基础，肯定是没有办法百分百懂的啊，所以说还是今天讲的所有的东西，明天花时间好好的去看一看，理解吗，OK。