尚硅谷前端基础 (139)

好，那么讲完了一些这个移动端的一个基本的理论，那我们就可以尝试着去做一个移动端的一个页面了，啊，那这个页面呢，我们在。这有一个PSD的一个设计图，我们给打开，诶是这样一个非常简单的页面啊，出现这东西不用管它，你就点这个不要解决就行啊，不要解决那出现这样一个页面呢，我们现在想要把它啊，呃，通过我们的网页给它实现出来啊，这就是一个PSSE的设计图，整体来说比较简单啊，就这么一块对吧，其实我们要做的话，这一部分，诶，这是图片，然后这一部分，然后这一部分对吧，东西也比较的少啊，相对来说也比较好做，那我们来看一下这个东西我们要。我要怎么去给他处理呢？怎么去做这个东西，那其实这里边我们就面临了一个问题啊，面临一个问题，那现在我们刚才说了啊，我现在要写一个页面呢，我们来新建一个文件啊，我们写一个哎零八我们来说一下我们这个视口的问题，那现在我要写一个移动端页面，首先一上来的话，肯定既然要是移动端的话，我们这个完美视口你就必须得写上啊，完美视口的话就已经他上来就给我们写好了，对吧，你都不用去记了啊，直接拿过来用就完事了啊，但是这个时候它会产生一个问题。

什么问题呢？哎，我们注意了，我们这个什么呢？不同的什么呢，不同的设备，它的这个完美。视口的这个大小是不一样的，是不一样的，咱们就不说许多设备了啊，一个个说那玩意也说不过来，我们就说找俩不一样就完事了啊，检查我们这儿呢，给它调下边去吧，先看这个是找一个iPhone iPhone6iPhone6其实在这儿就能看到完美视口是一个375，或者你看这个视口也行啊，375 iPhone6iPhone6它有一个完美视口，诶完美视口是一个375 375，而我们的这个iPhone叉呢，IPhone叉也是375啊，IPhone plus6plus。

Plus它是一个什么呢？是一个414，诶也就是说我们不同浏览器，不同那个设备，不同的手机，它的完美视口大小是不一样的，诶你说这又有什么问题呢？诶看着啊，我这写一个点BOX1，这里边呢，我们写一个这个style标签，Style标签这我们来写一个表，一个box一来一个375像素，Head呢，我们写一个100像素，100像素啊，然后background color background color来个井号，一个BV就写这么一个啊那现在我们来先看到我们这个IPHONE6里边，IPHONE6里边啊保存一下IPHONE6，诶当然我把默认样式给它去掉啊，星号我们来一个这个MARIN0，然后来一个拍ON0给它去掉，你会发现我这个375个像素在我们这个IPHONE6里边，678里面，对吧，它是不是正好把我们这个元素就给我充满了呀，哎，正好就撑满了啊，正好充满了，但是呢，当我切换到IPHONE678PRO。

Plus的时候你会发现这干嘛了，这缺了一块，为什么？因为在我们的IPHONE6里边，视口大小就是375，哎就是这块宽度就是375，那么我写375是不是正好把这个东西给撑满了，哎，给撑满了，而到了我们IPHONE6PLUS里面，视口大小变成了414了，这时候375是不是就缺一块，哎，缺一块，所以你这只有写成了一个414 414以后在我们的IPHONE6PLUS里边，它是不是才是一个全屏状态啊，但是一旦你要换回到这个678这了，这个时候嘛了，它实际上现在这个东西就实际上是什么了，实际上是一个溢出的状态，我们现在就是没有字看不见对吧。

他这块，哎，你看是不是。哎哟，这啥情况。你看现在这个滚动，这是这是放大了是吧，重置一下，现在实际上它是一个溢出，你看是不是横向有滚动条啊，哎，应该因为414是不是已经大于375了，哎，所以这个时候你会发现什么呢？由于我们不同设备的视口不同。由于啊，我们这个不同设备的这个视口和我们这个像素比啊，它不同，所以同样一个什么呢？同样的同样的375个像素，哎，在什么呢？在我们这个不同的设备下，设备下意义是不一样的，意义是不一样的，比如说。哎，比如在我们这个IPHONE6。

IPHONE6中我们这个375就是什么呀？哎，就是我们这个满屏的，哎就是全屏的，就是全屏的，而到了我们这个plus中375就会忙，375就会什么呢？就会缺一块，就缺一块，因为375，因为plus的视口是414对吧，375就会缺一块，同样你414在plus中是全屏，到了375那就出现什么呀，滚动条了，所以这个时候我们就面临一个问题，所以记住了，所以在我们这个移动端开发时，诶。对，网页我们就不能什么了，我们就不能再使用我们的一个像素，哎，来进行什么呢？进行布局了，你就不能再写像素了，你这一写像素那就出问题了啊，你这一写像素就出问题了啊，那不写像素写什么呀，不让写像素，诶我有招了，宽度你不就想全屏吗？全屏我就写一个100%不就完了吗？我写个100%不就完了，我写百分百你看在678里也是这样，在这个plus里是不是也这样啊，因为百分百就是全屏吗？诶这样不就完美的解决这问题了吗？这这哎呀，太简单了是吧，简直是太聪明了行不行。

不行，这一定是不行的，为什么？因为现在我这个页面结奏简单，我这就1BOX1，那我以后我BOX1里边还有呢，我里边BOX1还有一个什么呢？我还有一个这个BOX2呢，我这个BOX2里面还有一个BOX3呢，三我BOX3的百分之，我BOX1的100%是相对于包说的，或者说相对于这个S说的，这都没问题，但是你BOX2相对于谁说的，是不是相对于BOX1说的呀，你box三相对于说谁说的呀，相对于BOX2来说的，也就是说我的这个百分比的参照物一不一样。不一样，有可能我这元素就这么大个，你那个子元素你100%，你百分百不就跟它一边宽吗？能不能跟全屏幕一边宽呀，不行，所以你用百分比作为单位，并不能去解决我们这个问题，因为百分比的参照物是会发生变化的，所以这个时候我们就需要一个不会发生变化的单位，也就说它的参照物总是那个东西啊，总是那个东西，那怎么办呢？那在这里边我们就要说一个新的单位叫什么呢？诶我们叫要一个100，我们这直接写一什么呢？写一个VW 100VW，我们这一块写上这个单位以后，我们先看效果啊，先看效果在我们678里是不是全屏的呀，哎，在我们的这个，哎，这个678PLUS是不是也是一个全屏状态呀？哎，那这个就是我们说一个VW这个单位，VW表示什么意思，VW是什么呢？诶是一个这个新单位啊，它就是一个我们这个csi单位，它表示什么呢？它表示的是我们这个市口。

等于什么呢？视口的宽度啊，视口的宽度，你可以这么理解，VWV就是一个vipo啊vivopo v呢，这W就是什么呀，就是一个Y啊vpo视口的一个宽度，那我们注意了，我们100VW就是等于什么呢？就是等于一个什么呢？一个这个口的宽度，视口的宽度，所以这个时候我写个100VW在678PLUS里边，它就是表示414个像素啊，就表示414像素，所以你看一下啊，我们可以看看它这直接找到这bos题，我看能不能看到的渲染值，渲染值呢，这还。

Y，你看多少是不是就是414，哎，414当到了我们这个678里面就是多少就是375，所以100VW就是一个视口的宽度，那这个东西如果是一个VW就是什么呀？哎，我们说了EVWEVW就等于什么呢？等于1%是口宽度，百分一之一是口的宽度，那我们说了VW和百分比相比，那注意了这个单位它永远是什么呢？永远相对于我们这个视口宽度进行计算啊，永远相对于视口宽度进行计算，但是那个单位它对于PC端的兼容性并不是那么的好，他那写没写，我看看啊，VW有没有啊。

VW，哎，你看这写了，哎，E to 1%of the of the view posts e containing block，就是相对于视口的一个初始块的大小啊，就是这这个写了，我看这后边有没有兼容性的问题，VWVWVGIE，这是IE9以上对吧，IE9以上也就是说呃，相对来说是一些比较新的浏览器都支持，但是旧的浏览器支持度就不那么好了，但是还好移动端都支持是吧，移动端都是支持，这也也也都是支持的，所以这个属性的特点就是我们可以放心的带什么在我们的移动端当中去使用啊，在移动端中，所以在移动端根本就不用担心这个兼容性的一个问题啊，那也就是说VW它跟百分比的。

不一样的地方，百分比它所参照的那个物体会发生改变，而VW它总是参考于什么呢？总是参考于视口的，所以这个时候我们要想去做这个移动端，那我们现在来讲啊，当然以后我们还会有更多手段，尤其是学完GS以后有更多手段，但是现在对于我们来说，最好的一个方式就是通过这个VW来完成我们某的一个适配，好，那现在我们有了VW的单位了，哎呀，我们是不是。有很强的武器。可以。不是啊，不是来看我们的这个设计图，我们来看我们的设计图啊，我们的设计图的一个宽度，我们来看一下设计图宽度，其实能看出来的，它的宽度，整个宽度是一个750像素，这已经写上了，宽度是一个750像素，我们来说一下我们设计图的宽度是什么呢？是这个750像素，嗯，我们常见的设计图的宽度，还有一个什么呢？还有一个宽度可能是还有一个比较常见的就是一个叫做，呃，应该是一个幺幺。

25A125像素啊，那我们常见的移移动端的设计图的宽度一般都是，哎，一般都是750或者是1125，为什么是这么一个宽度呢？哎，因为这里边注意我们刚才讲过了，IPHONE6是视口的完美视口是300什么呀，375啊，375不仅仅是IPHONE6，像IPHONE4IPHONE5它都是这么一个375这个像素是一个比较经典的一个，这个这是一个比较经典的一个完美视口，它不能说比较经典吧，就是比较早啊，比较早就因为它产生的比较早，所以我们做的很多设计图都是参考这个像素来做的，那可能最早的时候我们做设计图都是按照这个苹果这个像素比去做的，比如说苹果就是375，那OK，我做设计图就做375的就完事了，但是我们为什么这个宽度是一个七百五呢？你看三七五七百五，375是不是乘以二正好是750，哎，所以七百五正好是375的一个什么呀，两倍，也就是说实际上我们现在的设计图都是一个三五的。

倍数1125是多少？诶是375的三倍，你看三三五十五，三七二十一，诶然后三三得九，是不是正好是125都是一个375的倍数，那这种图750的属于二倍图，我们125的就属于什么了，属于三倍图了啊属于三倍图了，那为什么要是它的一个倍数呢？你正好等于375不好吗？诶注意了，我们之前也说过，我们在我们的网页里，像我们在IPHONE6IPHONE5里边，我们是一个CSS像素对应两个物理像素，对吧？一个CS像素对应两个物理像素，那么如果我们的图片是375的话，我们图是375宽的话，那这个时候注意这个375是一个，就是375，就是375个像素，那这个时候我们在移动端去显示的时候，我们是不是要用两个像素去显示375个，就是显示一个像素啊，哎，那等于说我们这里边实际上你的这个设计图如果拿到移移动端的话，就等于被放大了两倍，你说这三期五。

实际上被放大成了750的去显示，但是它本身却是375的，放大了两倍以后，那实际上是不是就等于把一个像素变成两个像素了，那这个时候它的清晰度就会不行了，就会失真，就好像你把一个小图片放大那样一个效果，体验效果会非常的不好啊，非常不好，所以那我们的设计图干脆就直接是一个什么，直接是一个七百五的设计图，七百五的设计图，这样你拿到的所有图都是一个什么，都是一个二倍的效果啊，都是一个二倍的效果，那这个时候这个二倍的效果的话，你拿到你的网页里，那它就是什么呀，本来你就是二倍的，然后你用两个像素显示一个像素，那是不是等于就扯平了，哎，扯平了，就会确保一个比较清晰的效果，那为什么现在都是三倍图了，因为现在的手机是不是屏幕越来越清晰了，哎越来越清晰了，那可能现在你三倍图可能才能满足一个大部分情况啊，所以二倍图三倍图这两个比例是非常常见的啊，七百五幺二五，你先知道一下，那现在我们的这个。

设计图是一个750像素对吧？那我们现在也选择了，我们要用一个什么呢？VW作为单位，我们设计图是什么呢？是一个这个750像素啊，750像素我们使用什么呢？我们使用使用我们这个VW来作为这个单位，那现在我们面临到这么一个问题，诶，那也就是说我的七百五在我们网页里就是什么呢？就是一个100VW对吧，我750，如果我想表示一个七百五设计图的宽度嘛，设计图的宽度100%，这是不是就是一这这这就是七百五啊哎，100%就是七百五嘛，对吧，那我们网页里100%就是100VW，那这个东西呢，不同的网页可能不一样，有的网页可能百分百是375，有的可能是414，对吧，不太一样，那这个时候问题就来了，如果你要让我表示750，我还还还好表示，那750，你就直接写一个100VW是不是就行了呀，但是诶，如果你说。

老师你给我表示一个，哎，比如说这边我这有一个这么一个。这个菜单对吧，三明治这么一个菜单，我想表示这么一个高度，这是多少呢？这个高度是一个37个像素对吧，这是在我这图里量的，还不到三，还不到37，应该是一个。35个像素，35个像素，那我现在想在你的网页里去表示这35个像素，我要怎么表示？不知道怎么表示。我就想现在想创建一个这么大一个48，诶，这是48，我现在啊，我们说需求我要创建一个这个48乘以一个什么呢？35这么一个大小的一个元素，但是注意啊，我们这说的只是这个图上的单位，实际上我们这种设计图搬到网页里，你就不能要求像素了，我们只能要求什么呢？比例，它的比例效果在这个手机里跟在那个手机里显示效果是一样的，因为手机的屏幕大小不一样，像素量也不一样，像素大小也不一样，你不可能让它每一个像素都是一样的，所以我们只能是保证这个比例是吧，在每一个手机里都是正常显示，所以我们这儿说的这个48乘以35，这个是说的是设计图里的大四18个像素乘以一个35个像素，那现在我要怎么去创建，怎么创建，咱们一个个解决，我们先说48 48怎么解决呀，那现在其实很简单，我们现在是一个100VW 100VW等于什么？等于700。

才50像素啊，注意这个像素说的是设计图中的像素啊，设计图中的像素，设计图中的一个设计图的一个像素啊，那现在呢，我要问的问题就是，诶几个VW等于什么呢？等于35像素，诶48，先说48吧，诶等于48像素，诶感觉35是不是好算一点啊。

三十五一样啊，48像素也是设计图的像素，对吧？哎，怎么样才能换算过来，你们想一下，哎，其实这个东西是不是很简单啊，哎，很简单，那我们来看一下，我们来请出我们这个计算器，我们来看一下啊，我现在呢是100个VW等于750像素，哎，那我问你了，我几个VW等于一个像素？几个VW等于一个像素，那很简单，其实就是把100平均分成750份对吧？诶100平均分成750份等于什么？等于一个0.13333等于这么一个值，看来是除不尽对吧？看来除不尽也就是说我这么多VW等于什么呢？等于一个像素对吧？这么多VW等于一个像素，那现在我要做的是，诶，几个VW等于48个像素，诶那我其实就直接让这个值乘以一个什么呢？乘以一个48等于一个6.4，所以我48应该就是等于一个6.4个像素，6.4VW等于48，那35呢？来我这先除以48等于，再乘以谁呢？乘以一个35等于一个4.6667，也就是说我这乘，我这直接写吧4.667，哎，VW等于什么呢？等于一个35个像素，35像素，所以我要想创建这么大个一个东西，那么OK，我。

这个BOX1举例子，那就应该是什么呢？它的Y就应该是一个6.4的一个维达五，而它的高度就应该是一个六，叫做4.667的一个VW，那这样我创建出来的这个大小应该跟我们这个玩意儿大小就是什么就是一样啊，这图的大小就是一样的，所以这个东西在我的这个网页里，图里边这个原件这个元素大小在网页里就应该是什么呀，这么大个，哎看着大小是不是还还差不多呀，哎，还差不多啊，应该就这么一个比例关系，所以这东西会算了吗？哎，其实这里边我们就是通过这个V来计算出我们的什么呀，我们VW和像素之间的一个比例的一个关系啊，比例关系，那以后的话，你再想写多大，你想写100像素，那么OK，你就用100乘以它，你想写1000像素，你就用1000乘以它，你想写三像素就用三乘以它，这就是我们VW的单位，好，但是很明显。

这东西用起来并不省事，它有点麻烦对吧，有点麻烦啊，那好，那咱们先把这个单位给他体会体会，诶，然后待会儿我们来讲一下怎么能用，让这个东西变得更优雅啊，变得更优雅，好我们来听一下。