尚硅谷前端基础 (136)

好，那么我们的弹性核说完了对吧，弹性核或者叫深缩核我们就说完了，那接下来呢，其实我们就我就会有一个想法是吧，因为我们之前一直在做这个PC端，即使刚才做了一个简单的一个淘宝导航条，它其实也是从PC端的角度去做的，并没有去做一个，呃，从一个这个移动端的角度去出发做一个网页，那所以现在我们就想，诶，我们能不能利用我们弹性盒，或者说利用我们之前所学的所有的HTML也好，CS也好，所有的技术，我们能不能来做一个移动端的网站，哎，那当然是没问题的了，但是我们在做之前，我们要先说几个概念来，我们来先创建一个文件零五，我们在这儿先说一下这个像素，哎，这几个概念吧，它其实结论还是那句话，结论往往很简单，但是你真的要把它吃透的话，稍微的麻烦一点啊，稍微麻烦一点，我们这来写一下，我们这来说一下啊。

叫做第一个，我们要说的是一个像素，诶像素我们之前提到过这个问题，我们的屏幕是什么呢？诶我们屏幕是由，诶一个一个什么呀，发光的这个小点构成，哎，小点构成，哎，我们这个小点啊可以发出不同颜色的光，那具体的颜色就是RDB对吧，就是RDB，屏幕是由一个一个发光的小点构成的，那这一个个的小点。小点，诶就是什么呢？诶就是我们的像素啊，就是我像素，那这里边我们经常会看电脑，我们电脑里边有一个东西叫分辨率，你直接打开你这个分辨率直接打开，我这个写的是一个1920乘以1080，你来说一下啊，我们的这个分辨率，分辨率我这叫做一个1920乘以一个这个1080，它说的就是什么呢？说的就是我们这个屏幕中这个小小点的一个数量，哎，所以1920乘以1080表什么意思，像我这个显示器可能横着就有1920个像素，竖着就有1080个像素，这很好理解，对吧，就是一个一个小点的构成整个屏幕嘛，那这个点啊，太小了，你默认情况下你是看不见，你只有当你把你的屏幕放大到什么呢？放大到一定的程度啊，你才能看出来这个像素点大概什么呀，对吧，你得放大出来是不是才能看到这一个个小点的一个效果，哎，所以一般情况下，默认情况下你是。

看不见这个像素点了非常小，但是它也是方的，对吧？非常小，之所以你看不出它这个棱角来，那就是因为什么呀，点太小了啊对，太小，那这个是我们之前说的像素的概念，但是这个时候这个概念实际上是被我们简化后的概念，那我们像素的话应该分两种，我们像素啊，在我们这个前端开发中，我们这个像素要什么呢？哎，要分两种情况讨论哪两种情况，一种我们叫做CSS像素，还有一种我们叫做一个物理像素啊，一种叫CSS像素，一种叫物理像素，那我们来说什么叫物理像素啊，物理像素，那我们说上述所说的小点点小点就属于什么呢？哎，就属于物理像素啊，物理像素，所以我们说了显示器里1920乘以1080，这说的是什么？物理像素的一个数量啊？这说的是一个物理像素而。

我们什么叫CSS像素，CSS像素什么是CS像素，我们在什么呢？诶编写网页时我们什么呢？我们所用的像素都是什么，都是CSS，所以你注意啊，看这我写个样式style标签，我这写一个啊，我写一个什么呢？诶表一个BOX1，我写一个Y100 100，这个时候我这是不是写了一个宽100像素，高100像素啊，那注意了，这个100和100指的是CSS像素啊，所以这两个概念非常重要，一个是物理像素，一个是CSN像素，那注意浏览器在显示网页时，浏览器在显示网页时，它需要什么呢？需要将我们这个CSS像素哎转换为什么呢？哎，转换为物理像素，然后什么呢？哎，然后再呈现啊，然后再呈现，所以注意了。

我们这儿写的是什么？我们这儿写的是100像素，是100CSS像素，我们写网页的时候用的像素，浏览器是要去给你渲染网页，给你呈现网页呀，诶浏览器会把你的这个100个csi像素转换成什么呢？物理像素，那100个CS像素转换成几个物理像素，诶只能不知道，我现在假设不知道啊，假设不知道这个由谁决定，由浏览器决定，懂意思吗？哎，所以我们说了个什么呢？一个CSS像素，哎，最终什么呢？哎，最终显最终由。

几个物理像素显示，诶这个东西由什么呢？诶由我们这个浏览器决定啊，由浏览器决定，当然它是一个综合性的啊，不仅仅浏览器，可能跟我们系统也有关系是吧？操作系统，那这里边注意了，默认情况下啊，默认情况下我们一个CSS像素等于什么呢？等于一个物理像素，所以现在啊，默认情况下我还得再强调一下，默认情况下在PC端啊，默认情况下在PC端一个CSS像素等于一个物理像素，所以现在像我这写的100像素乘100像素，那这里边实际上这100个CSS像素，那就是100个物理像素，他们默认情况下是1:1:1的，哎，那你会说了，老师既然是1:1的，那好像CSS像素跟物理像素是不是就没有什么区别了？哎，注意可不是这样，因为我强调了叫默认情况下，有默认情况下，那是不是。

意味着还有非默认情况下，哎，而且这种非默认情况下现在来讲还挺常见的，那这里边我们还要再提出一个东西，叫做一个市口，市口的英文我们叫一个vipo啊vipo vipo叫做一个视口，什么是市口，市口什么呢？市口就是我们这个屏幕中。屏幕中，诶，用来显示我们这个网页的一个区域啊，简单说视口就是浏览器的窗口，我一打开这个这块区域，这个就叫什么呀，这叫视口，视口的大小可以改变，我可以通过拖拽，这个时候小了大了，大了小了，视口大小是不是可以改变呀？哎，这叫做一个视口，我们的网页都是在哪出现的，都是在这个视口当中去显示的，之前我们讲这个固定定位，我们也说了，我们的这个固定定位provision fix的，我们的这个元素是不是就是相对于视口进行定位的，哎，所以视口就是就是这个网页窗口，它是固定在这个位置干嘛的，固定在这个位置不动的啊，固定在这个位置不动的，所以这个时候我们可以通过查看我们视口的一个大小，来知道我们这个CSS像素和物理像素的一个比，诶我们可以什么呢？我们可以通过查看我们这个视口的一个大小来干嘛呢？诶，来观。

观察我们这个CSS像素和什么呢？和我们这个物理像素的一个什么比值啊，比值怎么看啊，怎么看来，那现在我想看看我这个视口多大，我想看我这个视口大怎么看怎么看，一般情况下啊，一般情况下我们可以直接通过啊，咱们先说啊，一般我们看视口只看宽度，高度不看啊，高度不看，因为网页高度一般不是定死的，但是宽度一般都是死的，对吧，所以我们不看高度，我们只看宽度啊，宽度怎么看，那视口这块区域实严格意义上讲，我们没有一个专门去看它的，但是我们网页中有一个特点，什么特点呢？我们元素的宽度，一个块元素的宽度默认是它负元素宽度的100%，所以我们是不是只需要找到那个市口的子元素就行了，哎，所以这里面说严格意义上讲，视的子元素其实就是我们的HT毛，所以你要想看视口的宽度，直接看什么呢？直接看HT门的宽。

就行了，注意了，我们浏览器有一个功能是缩放，你先给它重置，重置到什么呢？重置到100%，先不要缩放啊，先不要缩放，直接点HTML，然后看它的这个commuted computed来看它的核模型，不看不看高度啊，就看宽度，宽度多少是一个1920啊，1920，所以这个时候我们来说，诶默认情况下，默认情况下我们的这个视口的宽度是多少，是一个1920杠，诶叫做1920像素，注意这儿说的是什么，这儿说的是CSS啊，视口的宽度是1920像素，因为这已经写了是不是1920的，诶1920像素，那好了，那我问你了，现在我视口是不是这么宽呀？好问你了，它的物理像素是多少？

物理像多少，很明显，现在视口的宽度跟我的显示器的宽度是一模一样的，我显示器横向有多少个像素，它是不是就有多少个呀？哎，所以现在我的物理像素是什么呀？1920物理像素，所以啊，这里边我们来说一下视口的宽度是1920，这是CS像素，然后物理像素呢，也是1920像素，这个什么呢？这个是物理像素，物理像素所以注意了，那现在在我的这种情况下，在我的这个视口中，我是不是就是一个CS像素对应一个物理像素，哎，所以此时此时我们这个CSS像素和我们这个物理像素的这个比是什么呢？的比是我们的1:11米，这是默认情况下啊，默认情况下，好，那现在来看。

我们的浏览器，当你按着CTRL加上滚轮鼠标滚轮的时候，浏览器会放大啊会放大，它就是可以放大缩小嘛，对吧，放大缩小诶那我要问你了，这放大的原理是什么？放大原理什么？放大原理很简单，以前我一个像素这么大。我放大以后干嘛呢？我像素变得这么大了，那是不是自然就放大了，哎，自然就放大了，所以这个时候我们所谓的放大是干嘛呢？是把以前的，比如说我放大两倍，是把以前的一个CS像素变成现在的什么呢？两个CS像素，那那你好了，现在我一个CS像素变成两个了，那我整个视口现在干嘛，是不是就小了，哎，就小了，所以啊看着啊，我现在放大，实际上我放大网页实际上视口是变小了，你这可视区域就小了，不，你看随便找一个网站，比如说京东，当你放大这个网页的时候，你看啊，你放大的时候，你这块可视区域是不是就变小了，诶所以你在放大网页的时候，实际上那个视口是变小的，那我们现在来看，我现在就把我这个网页放大一个200%，200%，那这个时候注意我们来看一下，现在我视口变成多大了，这时候变成九百六了，哎，960个像素还是G，这个是我们这个放大两倍的情况。

放大两倍的一个情况，放大两倍的一个情况，我们来说一下视口宽度这是多少啊，这是一个960像素，960像素，这个时候这个也是CSS像素啊，三像素，好，那我问你此时我的物理像素是多少，你看嘛，我这视口宽度是不是还是这么宽，是不是还是我整个全屏的呀，所以物理像素实际上是不是还是我这个显示器的一个物理像素的一个数量，所以物理像素没变，物理像素永远不会变啊，你不你没有办法，你你你怎么改变物理像素，你把你显示器砸了，你做你给显示器做个手术是吧，把那个像素给给它放大，那不可能对吧？不可能，所以物理像素是不会变的，所以这个时候它的物理像素依然是1920，所以此时此时我们这个CSS像素和什么呢？和我们这个物理像素的一个比是多少？哎，比是一个叫做一个。

1:2，也就说这个时候我这儿如果创建了一个，咱们来直接写一个，直接写一个，看着现在我这是不是一个BOX1啊，哎，BOX1我这直接点一个BOX1，我们来看一下这个BOX1，现在我们这来写一下啊，我们直接来一个background color background color，我直接写一个right，这个时候注意我的CSS像素是多少，是100乘以100，但是注意这个时候物理像素多少，是200乘200，你怎么知道的？哎，直接用你的截图工具量，你截图工具量出来的都是物理像素。

看到了吗？是不是一个200乘以200，哎，200乘以200，为什么？就是因为现在我们这个物理像素和CSS像素它们的比变了，以前是一个对一个，现在我是不是一个对两个呀，哎，等于我以前这一个点就显示这么大，现在我一个点是不是等于是两个点的位置，哎，两个点的位置，但是注意啊，我们这说的比都是说的一个方向的，我说一个哎对应两个，哎我说一个对应两个，是是这么一个关系，说的都是一个方向的，但是我们这个图形它最终是不是得显示一个这个正方形啊，哎，所以你有你不光有宽，也还有高，所以实际上它显示一个效果是你你看着是一个对两个，实际上是一个对什么呀，一个对四个啊，实际上一个对四个，因为它是四个，它是它它它得有两个方向对吧，是长乘以长乘以宽嘛，是这么一个东西啊，所以那现在你要理解的就是一件事，第一件事儿就是我们的像素分两种，一个是CS像素，一个是物理像素，第二件事儿CSS像素，不一定就一个CSS对应一个。

物理像素有的时候是一个对应多个，诶，一个CS像素对应多个物理像素，甚至有时候反过来是多个CS像素对应一个物理像素，这都是有可能的啊，那现在可能这种情况就是我放大的时候，但是你缩小的时候变成100了，就变小了，对吧，就变小了，除了这种情况的放大缩小，有的时候我们那个像WIN10，你的显示器比较高清的时候，WIN10会自动会有一个选项，就是把整个的给你放大，可能放大一点二五倍啊，或者1.5倍，那个时候你的像素比也会发生变化，但是你现在要确定的一个概念就是你要知道CSS像素还有物理像素它们不一样，哎，并且你还要知道我们可以通过什么，我们可以通过查看视口来查看他们之间的一个像素的什么呀，像素比，实际上你想一下我们这个像素比我们是怎么改变的。

怎么改变的，我们放大的时候是不是视口是不是变小了，视口变小那像素比是不是就一个对多个了，诶一个对多个了，那我视口变大了，视口变大了，那实际上这个时候像素比是不是就多个对一个了，哎所以其实我们这个像素的比值一直都是通过什么改变的，哎，所以注意啊，我们可以什么呢？我们可以啊，哎通过这个改变这个视口的大小来什么呢？哎，来改变我们这个CSS像素和什么呢？和我们这个物理像素的一个比值，先记住了啊先记住了，这是第一个概念，我们先停一下。