尚硅谷前端基础 (138)

好，那刚才我们提到了是吧，我们如果你的网站想让诶移动端有一个比较好的体验的话，那往往我们都需要要专门给移动端去开发页面对吧？那我们这里边我们要怎么去开发移动端页面，那我们在这儿呢，新建一个网页。这里边我们叫做一个零七啊，这个是我们一个移动端的页面，移动端的一个页面点一面，那这里边我们就要注意，我们要说一个问题啊，我先把这个Meta啊，我们先写一个页面，然后把这代码我先给它注掉啊，我们先把这代码给它注掉，那现在比如说这个网，这个网页就是我专门来给我的这个移动端去设计的啊设计的那比如说我写一个什么呢？我写一个点一个BOX1啊，点一个BOX1，我们写点样式吧，Style标签，哎带标签点一个BOXS1，是一个100 hi，是一个这个100，诶二百二百加200吧，哎，还是100。因为100的话是个方的对吧，我们这直接来个background color，我们来一个什么呢？来一个red，诶我写这么一个东西对吧？来我运行起来，运行起来的话，这个如果在我们移动端的话，看的话就是正常的对吧，这个效果，但是拿到了我们的移动当这是说在我们PC端显示是一个正常的，对吧？但是当拿到了我们移动端以后，你会发现什么呢？注意啊，我现在是iPhone X显示的，它的比例就是100%，那就是说我这儿看什么呀，你在你手机里看就是什么呀，当然如果我调成这个IPHONE6的话，其实也是类似的，但IPHONE6还更更小了，对吧，更小了，那这个时候你会发现，诶，我调成100啊，100，我同样一个100乘100，刚才在我的PC端显示的是一个效果，当到了移动端显示的。

效果是不是变了，哎，很明显感觉到这个方块干嘛了，这个方块小了，这个方块小了，为什么方块小了，为什么方块小，那这里面我们注意了，我们移动端，移动端默认的一个视口大小，视口大小是什么呢？是980。

980CSI像素，980CS像素，这是一个980CS像素，所以什么呢？所以默认情况下，默认况下我们这个移端的一个像素比是什么呢？像素比就是什么呢？就是我们这个移动端的一个宽度，除以什么呢？除以这个980，诶不是啊，是980，是980除以什么？除以我们这个移动端像素一个宽度，如果你这也是980，那么OK，那咱们就是什么呀？哎，就是1:1，诶如果你是1000多，那我可能是1:1:2，但是你如果还比980小呢，那我可能就1:0点几，懂这意思吧，所以拿我们那个IPHONE6来说，我们的比率是不是就是980比上一个七百五啊，那我们IPHONE4就是一个980比上一个750 iPhone6是吧，750，那这个时候你就要注意了，本身我们那个移动。

它像素就小，然后你这还一个像素对应什么呢？对应零点几个，那是不是会导致你那个就就更小了，哎就更小了，所以这个时候等于什么呢？如果啊如果我们什么呢？我们直接诶直接在我们这个什么呢？诶网页中，诶直接编写我们这个移动端代码，那这样会导致什么呢？诶这样诶在这个980980的一个视口下，哎，我们的这什么呢？诶我们这个像素比是什么呀？像素比是是非常的。哎，是非常的不友好的啊，非常的不好的啊，这样的像素比在980的这个视口下，像素比是非常的什么呀？诶可能我们之前是什么呀，之前是1:2，现在我可能是1.1比什么呀，1:0点几啊，1:0点几，那这个像素比非常的不好会导致什么呢？会导致我们这个什么呢？诶网页中的这个内容非常非常的什么，非常非常的小啊，非常非常小，就像什么东西啊举个例子，我有个图在这，我有三张图啊，我有三张图，第一张图呢，诶我们来看啊，这三个图的大小都是一样的啊，这个三图大小是一样的，我们假设啊，我这一个方块就是一个像素啊，一个方块就是一个像素，那现在呢，同样大小下，你像我这个里边有几个像素，哎，有四个方块，四个方块那就四个像素对吧，那我这四个像素就这么大个，你看我一个像素多大个对吧，但是我换到一个特别清晰的屏幕里边，那你现在我这里边有多少，这里边是不是四四。

有16个像素，那好了，我整个这个框是大小是一样的，这个像素多而那个像素少，那是不是就证明这个像素比较小啊，单位像素比较小啊，单位像素比较小，好，你再要小像素更小了，那这时候像素更多了，数量是不是就更小了，哎，数量越多那就越越小，那好，那这时候同样一个四个像素，我在这里边四个像素多大个就整个，但是换到我第三张图里，四个像素多大个才。

这么大个，哎，那所以在我们当然我这是比较夸张的啊，比较夸张了，那就假设就这么夸张，那这个时候可能在我的PC端里，我这玩意儿显示的是这么大，但是到了我的移动端里，我显示什么是这么大个了，那这个时候还还能不能看清楚了，就不能看清楚啊，看不清了啊看不清了，所以这个时候我们就注意了，所以注意了我们在编写什么呢？我们在编写我们这个移动端页面，我们必须要什么呢？必须要确保有一个比较什么呢？比较合理的什么呢？比较合理的像素，像素比，比如说什么呢？一般情况下，比如说我一个CSS像素对应什么呢？对应两个物理像素，两个物理像素，那这样是不是等于比我们PC要放大两倍啊，那这样我们在移动端是不是也可以正常看了，诶有的可能什么呢？可能是一个CSS像素对应什么呢？哎，对。

应诶对应三个物理像素，你就说我要把这个比率调上来，以前是1:0点几，我现在调成1:2，我调成1:3，那这样我可能我同样一个像素，比如说我在这里面我调一下，哎，那像这个图，我可能我这一个像素就这么大个，那我想在我们的另一个图里显示同样一个效果，那怎么办呀？哎，那我让我这四个像素等于它那一一个像素是不是就行了，那就行了，所以这里边我们需要设置一个什么呢？我们要写P3页面，我们的第一件事儿就是不是不是P端啊，我们要写这个移动端页面，我们第一件事儿就是要先调整我们网页的一个像素比，把它的像素比调整到一个比较合理的范围，懂这意思吗？调整到比较合理范围，那怎么调像素比？

怎么调像素比啊？诶，刚他们讲像素的时候，停不停会问，诶，我们可以通过改变视口的大小来改变CSS像素和物理像素的一个比值，诶也就是说我这个玩意儿干嘛呀，你像我这个，我IPHONE6物理像素是不是就七百五啊？诶，这个是固定的，那你想调整像素比，你把视口调小一点，你视口是375，那它的像素比是不是就是一个1:2了，诶所以我们可以通过调整视口的大小来影响这个像素比，诶那问题来了，我们怎么来调整视口大小，诶那这里边我们来说一下我们可以什么呢？哎，我们可以通过这个Meta标签诶，来设置我们这个视口的一个大小，怎么设置啊，直接在这演示，我们直接写一个Meta Meta Meta写出来它里边那个属性叫做name，因为我们说了Meta是不是设置一些原数据啊，诶，Name表示什么意思？表示的是你要设置了一个数据的一个名字，我们这个name叫什么呢？叫做一个viw，叫做一个we po viewpo，什么意思？视口，那所以它的作用就是什么呢？就是设置我们这个视口的一个大小，那视口大小我们要设置多少呢？后边我们要跟着一个content content是。

我们要设置个内容啊，诶，那视口的一个宽度叫做一个外，当然我们也可以设置高度，但是高度我们一般不考虑，我们只考虑宽度，宽度那比如说宽度，我这写一个什么呢？写一个100个像素啊，我们就演示一下，那这个时候注意这一行代码的作用，就是把视口的大小设置成什么呢？100像素啊设成100像素，好，我把这个先给它注掉，我们先看效果啊，先看效果，这个时候我们还是这一刷新，看视口大小，还是找疫苗多少，视口大小是不是就是100像素，哎，100像素，那这里你注意了，现在我把这BOX1给整上了，那现在你看我同样是一个100乘100的，那现在这BOX1是不是给撑满了，甚至出现滚动条了，为啥？为啥是这个效果，因为我们这是不是有默认样式没清除啊，哎，所以在这我们清除一下默认样式，来一个MAR00，然后来一个PA定零，默认样式一清除，你看我现在这100个像素是不是正好把它给撑满了，为什么撑满了？因为现在我视口的宽度。

就是什么，就是100，所以现在我写100是不是正好把它给撑满了，就这么一个效果，那现在我的像素比是多少？那现在100像素是什么？CS像素物理像素是750，这是六吧，对吧？是100比上一个750，那等于我现在是一比上7.5个，我一个像素是不是对应7.5个呀？哎，那我这换我这要改成200呢。我要改成一个200像素这一保存，那现在来看我这100是不是正好占一半啊，诶正好占一半，那好了，我问你现在我的像素比是多少？哎，那现在的像素比是一个什么呢？是一个200比上一个什么呀，750 200比上一个750，那等于是我一个像素比上一个什么呀，比上一个3.25个物理像素是不是一个1:3.25这么一个关系，哎，1:3点完了，那这个时候是不是又就大了，哎，所以你要注意了，非常简单，就是通过它我们就是可以改变什么呢？改变我们这个视口的一个大小，那当然你也想改多少改多少，你想写2万也行，对吧，它它的作用主要就是调整这个像素的一个比值，但是我这是调整完了，但是我觉得我这个比。

也不是很完美啊，1:2我感觉也不合适，刚才那个1:7.5那更恶心对吧，1:2也不合适，那我要如果1:4等于个300像素呢，等于300像素呢，也还行，但是总是感觉差那么点意思，哪差意思呢，因为我们所给出这些值都不是我们经过一些科学呀，或者一些科学的方法去测出来的，都是我们自己瞎写的，一百二百三百是吧，还都特别整啊，还有特别整，所以这种方式很明显它不是那么高端，那这里边注意了，我们要说一下每一款每一款这个移动这个设备，哎，移动设备但是什么呀，那设计师他都会有一种呢，都会有一个这个最佳的一个什么呢？最佳的一个像素比啊，最佳一个像素比，那一般我们什么呢？一般我们只需要将我们这个像素比。

设置为什么呢？设置为该值，诶即可什么呢？诶即可得到一个什么呢？一个最佳效果啊，最佳效果，所以这个时候我们只需要找到这个最佳像素比就行啊，那个最佳像素比在哪呢？我们来看一下我们的网页，这里边看这儿我们还是拿这个IPHONE6举例子啊，你看IPHONE6的最佳像素比是多少呢？它在最后边，最后边写了是一个什么，是一个2.0啊2.0什么意思？那就是我一个CSS像素对应什么呢？对应你两个物理像素啊，一个CS像素对应你两个物理像素，那这个就可以达到一个最佳效果，懂意思吗？诶，最佳效果，所以这个时候我们如果想让我的网页在我的IPHONE6里边有一个最佳效果，我应该让它的像素比是一个1:2的关系，一个CSS对应两个物理像素，那我怎么能达到一个1:2呢？

我们想一下我现在的什么呢？我现在的物理像素是一个750，那我现在希望有一个值跟它比起来，等于1:2，那怎么办？那是不是就是七百五除以二，应该是一个375像素吧，哎，375像素，所以在这儿我们应该等于一个什么呢？等于一个375像素一保存，那这个就是我们达到了一个最佳的像素比，那就是一个像素对上什么呀，两个像素，那这样，这是我们厂商给我们的一个建议，给我们的测试结果，那基本上你只要这么写，在我们的网页里就会有一个比较好的一个显示的什么呀，效果啊，显示效果，所以这里面注意叫什么呢？

市口将我们这个什么呢？像素比设置为我们这个最佳像素比的这个像素比的这个口大小小，我们什么呢，我们称为。完美时刻，完美时刻，所以像这个你看当我把Y等于375PX写上以后，那现在它的出现是不是使我们像素比达到了完美的1:2的状态，哎，达到了完美的1:2状态，那这个视口我们就称为什么呢？称为完美视口，懂意思吧，叫完美时口，为什么叫完美时口？因为它可以将我们的像素比设置为到那个最佳状态啊，最佳状态叫完美时刻，那问题又来了，那我这儿现在375像素是什么？是IPHONE6的最佳时刻，那别的手机是不是？

看网页看网页啊，这像素比我们都不用看了，我们来看，实际上这一栏写的he，这一栏写的就是它的最佳视口，你看IPHONE6最佳视口高度不管啊，最关宽度是一个375个像素，对吧，IPHONE6但是6PLUS呢，是一个什么414个像素，而我们IPHONE5呢，是一个320像素，IPHONE4IPHONE都是三百二像素，你到了ipad呢，变成了768个像素，也就是说我在不同的设备当中，我的这个完美视口的大小，它。一不一样，哎，它是不一样的啊，它是不一样的，所以我这写一个三七五行不行不行，你这个写完了那就可怕了，写完了以后你这个网页可能只在这个IPHONE6里边看的效果比较好，一旦换手机就废了，或者说完美是否十三七五的都能正常看，但是一换手机就看不了了。

懂这意思吧，哎，所以我这能不能写四，不能写四啊，不能写四，所以这里边注意了，在这我就不用写375了，我应该写的是什么呢？叫做一个device wise，哎，这个值是我们的一个变量，是我们网页里给我们提供一个变量，Device wise表什么呢？就表示什么呢？表示的就是我们设备的一个什么呀宽度，也就是我们设备的一个完美视孔啊，完本视衡，所以这个时候我写这句话的意思的作用就是什么呢？就是让我们的这个设备的扩，诶我们的视口等于完美视口，所以这个时候你看啊，现在看刷新一下，现在是我的IPHONE6，看IPHONE6的十口大小是一个375，当我换到一个IPHONE678PLUS变成什么，变成414了，当我换到iPhone叉变成多少了，又变成375了，当我换成诶没有叉，X叉应该跟它是一样的，也就是说。

换别的手机换一个，这是不是就变成360了，诶也就是说这个时候我只要把这一行代码写上，就可以说是确保我们的视口是一个完美视口，完美视口就可以确保到我们这个像素比是一个最佳比值，一般可能就是1:2啊，1:3啊，能好一再高清一点，能有1:4那种屏幕，对吧，主要就是为了达到这个什么呀，像素比啊，像素比好，那这个说完了，那其实你会发现这个就是谁呀。是不是就是我上边住的这个，哎，你看。Wepo content wise等于device，这是不是就是一个完美视口，哎，完美视口，但是呢，他这比我还多写一个，他用逗号多写了一个引initialo scale等于一个1.0，引initialo叫什么呀？初始化缩放，初始缩化缩放等于什么呢？等于一倍，这两句话的意思是一样的，等于一倍，那也就是让我们的市口是一个完美时刻，这两个句话的意思是一样的，那为什么要都写上，都写上保险，避免在一些极端的情况下出现问题，其实大部分情况下写一个就够了，但是我们一般情况下会写两个，确保什么呢？它一直有效啊，就是有时候我们横屏竖屏一切第一种可能废了，但是这种的话就是不怕你横屏竖屏切了，就是避免一些什么呢？

问题，所以这一行代码的作用就是设置我们完美视口，没什么可说的，把这个东西记下，这个是什么设置将哎我们这个网页的一个视口设置为我们的什么呢？哎，完美视口，完美视口，你说老师不行，你这讲半天我都没听明白，记结论，结论就一件事，结论就一件事。

以后再写移动端的页面，就把上边这个玩意儿先写上就完事了啊，这个是我们在移动端里专有这么一个东西，叫做一个完美，是否它的作用？就是设置我们的视口大小为我们完美视口，以确保我们像素的比值是是正确的啊，正确的再强调一下啊，我们说的像素比值，我说的什么1:2也好，1:3也好，我们说的什么说是单一方向的，哎，我们说一个像素可能这么大个能在我们这个一个。我们这个一个像素这么大个，那我如果是1:3的话，那等于我是要用三个物理像素表示一个什么，表示一个CS3像素，那这时候写完了，注意我只是一个方向的，我真正的话，实际上我如果1:3的话，如果我是1:3，实际上我要显示一个像素，我实际上需要九个像素，因为我不可能把一个正方形是不是显示长方形的，我得往上边都得补三乘以三，它就是一个什么呀，就是一个九，实际的是一个九，懂这意思吧，它是双方向的，我们这个比说的是单方向的，说的是对角线的比，但是实际上你把那东西都都给它乘出来啊，都给它乘出来，好说完了啊，那就是记住了啊，以后这玩意儿上来写移动端就先写这个东西啊，先写这个东西好，完事你停一下。