尚硅谷前端基础 (137)

好，那么我们说完了这个像素的一个概念呢，我们再来说我们的重点，主要的话题，我们要说一个移动端，那我们刚才提到了一个像素啊，我们说了像素是一个屏幕里面的。小点啊，小点点，那这里面注意了，我们要说一下，哎，在什么呢？在我们的不同的这个屏幕中啊，屏幕中我们这个单位像素啊，单位像素的这个大小是不同的，是不同的什么意思，我们叫什么呢？哎，我们像素越小，诶像素越小或者什么的这么写吧，我们叫什么呢？诶像素越小，我们这个屏幕会什么呢？诶屏幕会越清晰啊，屏幕会越清晰，你像我的这个显示器，我们看一下我的这个显示器，它是一个24寸的显示器，它的分辨率是一个1920乘以1080 24寸它是一个1920乘以什么呢？哎，乘以一个1080，哎，所以我的这个像素多大的话，其实是能算出来的，哎，你直接拿这俩玩意一除，你就知道我这一寸有多少个像素对吧，那能算出来我们我就不管它了啊，我不管它了，那这个时候注意了，我们要说的是移动。

对吧，那我们移动端的分辨率是多少呢？诶，那这里边我有一个网站啊，我把这网址给你粘过来，它可以查看一部分手机的分辨率啊，但是并不全啊，并不全，那这里边我们来看一下啊，在这儿的话，它实际上会给我们写一个手机的一个分辨率，诶比如说我们找一个，呃，找一个可能我们比较比较熟悉的，哎，比方说我们拿这个IPHONE6举例子，IPHONE6的话，你看啊，它这儿的分辨率，这是它的一个分辨率，分辨率是一多少，是一个七五乘以一个1334啊，这是iPhone iPhone6啊，I6是一个750。

诶，七百五乘以一个什么呢？1334啊，七百五乘以个1334，那这个时候我们来看一下，七百五乘以一个1334，它的大手机大小是多少，手机大小是不是只有一个4.7寸，哎，4.7寸，所以大小是一个4.7寸，那你这里边你其实你稍微懂点数学，你就很明显的看出来，在苹果手机里，在IPHONE6里边，它的这个像素是不是要比我这个显示器的一个像素要少啊，你看它比我这个寸数少了那么多，然后干嘛呢？你看这个是不是还还挺接近的对吧？还挺接近的，所以很明显苹果手机里边那个像素它肯定比我显示器的那个小，所以这里边说我们这个部分情况下，大部分情况下，我们这个，哎不是大部分情况下啊，手机就是基本上就是这么这么一个情况吧，哎，手机智能手机中的。

智能手机的一个像素点，哎，要远远什么呢？远远小于什么呢？小于我们这个显示。计算机的一个什么像素点非常小，所以我们那个屏幕都叫什么呀？叫视网膜屏，它那个像素点是人的肉眼不能察觉的，特别特别小啊，特别特别小，所以你像我们的I iPhone6，它的大小就什么呢？它的横向有750个像素啊，横向有750像素，它的什么呢？它的高度是1334个像素，这是它的一个比值啊，这是它一个比值，那这个时候我们就产生一个问题啊，我们以IPHONE6为例，IPHONE6为例，那比如说我们要提一个问题啊，提个问题，提个问题，哎，我们说了那一个宽度为什么呢？为900像素的，900像素的一个网页，那在我们的这个IPHONE6中。

IPHONE6中要如何显示？要如何显示呢？这里边注意了啊，看这我IPHONE6宽度是750，宽度是750，而我网页宽度是900像素，那我这个东西在IPHONE6里边要怎么去显示，怎么显示试试，在这儿我们写一个div div点一个BOX1 box1呢我们给他写一个宽度，直接来一个style标签，Style标签在这我们直接来一个点一个BOX1 box1呢Y我们写一个900啊900，然后的话head我写一个100啊100BACKGROUND color，我们给他写一个井号一个什么呢？井号一个BFFA啊，井号一个BFA，那注意啊，为了掩示这个效果，我得把上边这两个麦它我给它注了啊，其实第一个注了行，第二个注住都行，我把第一个住了，住了不要让它对我们产生影响，其实我现在要讲就要讲它呢，把它先住了啊，待会我们再说，有它的情况跟没它的情况有什么区别，保存现在我们就要运行一下，直接运行那。

现在是在我们PC端，那很明显我这宽的是191920的，那是不是这差远了，哎差远了，那我们来看我们的移动端，移动端怎么看，还是选中这个手机图标，我们是不是要看这个iPhone iPhone6啊，哎，直接切换到IPHONE6678都一样的，我们这一点开注意了注意啊。诶，我刚才说了，IPhone屏幕的宽度是多少，是750个像素，而我这是多少，这是900像素，但是你会发现这900像素是不是还没有把这屏幕给撑满呢？是还有缝呢，还有空呢，这是为什么？哎，注意啊，注意这个750像素是什么？是物理像素。

物理像素，而我这900像素是什么？是CSS像素，所以你能不能就用这个评论，它能显示大个不能你应该看的是什么，你应该看的是它的视口大小啊，视口大小我们来看看它的视口多大，直接还是看毛视口多大是多少，是980啊980，所以这时候注意了，注意什么呢？哎，那注意了啊，我们这个默认情况，默认情况下，我们这个手机端移动端，移动端的网页，它都会将这个视口设置，为什么呢？设置为980像素，980像素，那注意啊，这个是一个CSS像素啊，都会把这个视口设置为980个像素，诶那这里边说的是所有手机看这现在是678，我们看啊Galaxy s5，这是三星的对吧，980。

带宽这个是啥呀？这是谷歌的是吧，980再看叉。980看到了吗？诶你插这个，他那像素还多呢，诶X这好像没写X应该跟plus是一样的，它是一个1080的，但是它是不是也是用980去显示啊，所以注意默认情况下，我们移动端的网页都会将视口设置为980个像素，为什么要这么设计，他为了什么呢？以。以确保我们的PC端网站网页可以在什么呢？在移动端正常什么呢？正常访问啊，正常访问，因为以前的话，比较早的时候，网页的宽度一般都不会超过1000，一般都是980960这个宽度，所以它把它的视口设置为980，那这样就可以达到一个什么效果呢？我随便打开一个网页，这个网页一定在我的屏幕里边是一个完整展示的情况展示出来，比如说我们拿京东，我们看看京东这个啊，我这我这还放着蜡啊，重置一下，这放不放大。

是没放京东，我们打开这F12，我们来看它的移动端的效果啊，移动端的效果，这这当时京东做适配了京东，我们这还看不出来，我找一个网站了。我们找一个没有做适配的啊iPhone。I'm。打开看到这个效果了吗？诶，它就会把这个视口设置，为什么呢？诶你看这时候还小了是吧，设置为就不它不是小了，待会再说这问题，你就是说你会发现如果你在一个手机端打开一个什么呢？打开一个没有对移动端适配的网站，基本上你都是一下子就能看到那个网页的一个全貌，一下子能看到网页全貌，就说那个网页整个呈现在你面前，它不会只呈现什么呢？只呈现一部分啊，不会只呈现一部分，那这就是他的一个特点，所以一般情况下，它都会把网页的宽度设置为980，这个980是什么？这个980就是它的一个视口的一个宽度，这个是一个物理像素啊，物理像素，但是但是啊，但是如果我们这个网页的宽度超过了什么呢？超过了980啊，超过了980，我们的什么呢？诶我们的这个移动端，移动端的浏览器它会自动，诶对我们那个什么呢？诶网页缩放。

诶已什么呢？诶已完成，已完整什么的显示这个网页，所以当你的网页过宽的时候，它的视口会调，总之就是默认情况下，我们移动端的特点，它就是让你一下子把那网页看全，为什么让你一下子把网页看全，因为我们想一下那网页很大，屏幕很小，这个时候他让你一下看全了，你可以干嘛呀，你可以你先大概有一个印象，然后你想看哪，你再通过手指的去放大某个位置，你是能看全了呀，诶所以通常情况下，它会让你一次性把这个网页都给你看全，像我们之前写的那个小米，小米打开。当然小米的时候，我们得把这个同样啊，把这个东西给它注了注掉啊保存，然后我们来运行一下，还是看移动端，我们这个应该是1200多个像素，但是如果你在移动端的话，你看它是不是也是给你显示完整了，诶也是给你显示完整，这个时候实际上它视口做了调整了，诶它视口还是980，但是网页进行了一个缩放，就是为了让你一次性把这个整个网页都给你显示，显示全啊显示全好，那接下来再回到我们的话题，那这个特点我们大概就了解了，对吧？这个特点我们大概了解了，所以这个时候就会产生一个问题，所以呢，基本上我们这个大部分这个PC端，大部分的这个PC端网站，PC端网站都可以什么呢？诶都可以在我们这个移动端中，诶正常什么呢？正常浏览，但是但是啊，往往都不会有一个什么呀，哎，有一个这个好的体验啊，往往都不。

会有一个好的体验，为什么我本来你想一下啊，你想一下，现在我们来看一下，我是将网页的视口设置为了980像素三像素，物理像素多少？物理像素是750，物理像素750，也就是说他们的这样一个像素比是一个750，比上一个什么呢？比上一个应该是什么呀？应该是一个980 980比上一个七百五啊，980比上一个750，也就是说我一个物理像素可能对应的是零点几个，我一个CSS像素可能对应的是零点几个，什么零点几个物理像素，我一个CSS像素像素对应零点几个物理像素，你想想我移动端的像素本来就小。

本来就小，但你现在还一个对应零点几个，那是不是就变得更小了，诶就更小了，所以这个时候因为什么呢？往往会因为内容过小，所以这个网页根本就没法看，我们只能是干嘛呀，先整个大块看一下，然后放大局部再看某个局部，那这时候还很容易就看不全这个信息，所以我们的大部分PC网站虽然可PC端网站虽然可以在移动端的正常浏览，但是往往结果都什么样都不好啊，往往结果都不好，所以哎，那一般情况下，那为了解决这问题啊，为了解决这个问题，哎，我们都需要什么呢？哎，我们大部分网站啊，大部分网站都会专门什么呢？哎，专门为我们这个移动端设计什么呢？设计这个，设计一个网站，设计网页，哎，那也就是说可以让什么呢？你PC端访问的时候是一个网站，你移动端访问的时候又是一个，比如说小米，就这样，我们看小米，这是小米的官网，我们现在通过这个。

浏览器正常访问，它就是一个正常的一个网站，但是当我们通过的是移动端说手机啊，我得刷新一下，我这一刷新这个时候你看它给我返回的什么是就返回的是一个专门给我们移动端来设计的网站呀，哎，那这个时候才会有一个比较好的体验，所以你咱们一定要记住了，如果如果你的网站希望移动端也可以浏览，那这个时候你必须要专门为移动端进行什么呢设计，你一定要考虑到它在移动端看这个网页的时候是一个什么样的，什么样什么样的效果啊，什么样的效果好，那这里我们说的是一个移动端的一个这个一个问题啊，这是我们说移动端浏览这个PC网站的一些问题啊，我们先停一下。