1.1 像素
1) 屏幕是由一个一个发光的小点构成的，这个小点就是像素 2) 分辨率：1920*1080 ，这实质上就是说的小点的数量。 3) 在前端开发中，像素分为两种:即物理像素和CSS像素。 a) 物理像素：上述所说的小点点就是物理像素。 b) CSS像素：编写网页时我们使用的像素就是CSS像素。 1) 浏览器在显示网页时，需要将CSS像素转换为物理像素，再呈现页面。 2) 一个CSS像素最终转为为几个物理像素，最终由浏览器决定。 默认情况下，一个CSS像素 = 一个物理像素。
1.2 视口
+++ 视口（只看宽度，不看高度） 1) 视口就是屏幕中用来显示网页的区域。 2) 视口的大小可以等价于HTML标签的大小。CSS像素表示。 3) 视口的大小随着浏览器的大小改变而改变。但是不会改变像素比。 4) 只有手动设置视口的大小，才可以改变像素比。 1) 利用浏览器的缩放，可以改变像素比。 2) 手动设置视口大小，改变像素比。 查看视口大小： 浏览器右键->检查->计算样式-> 查看html的大小
1.3 像素比
1) CSS像素/物理像素=像素比 2) 可以通过查看浏览器全屏的视口大小。来计算像素比 全屏视口大小/屏幕分辨率 = 像素比。 屏幕的分辨率指的是物理像素。 视口的大小指的的是CSS像素。(视口的大小等价于HTML标签的大小) 3) 只有手动改变视口的大小，才会改变像素比。 像素比>1 ,意味着网页缩小展示，像素比越小，网页越小。 像素比<1,意味着网页放大展示，像素比越大，网页越大。
二、移动端网页
2.1 移动端特性
1.默认情况下，移动端浏览PC端网页都会将视口设置为980px。以确保PC端网页在移动端正常显示。 2.如果网页的宽度超过980，则移动端的浏览器会自动对网页缩放以完整显示网页。 3.手机的物理像素一般为750px 。手机的像素点远远小于电脑的像素点。 在不同屏幕中，像素的大小是不同的，像素越小，屏幕越清晰。 电脑屏幕 24寸 1920px * 1080px (物理像素) 苹果xxx手机 4.7寸 750px * 1334px (物理像素) 由上面可以看到手机的像素点远远小于电脑的像素点。
2.2 移动端浏览PC端网页，网页会缩放展示
1. 移动端浏览PC端没有做适配的网页，网页会缩放展示。一般会看全整个网页。 原因： 1) 默认情况下，移动端浏览PC端网页都会将视口设置为980px。 此时像素比一般会<0，网页会缩小展示。 2) 如果网页的宽度超过980，则移动端的浏览器会自动对网页缩放以完整显示网页。 3) 手机的像素点远远小于PC的像素点。
1）移动端浏览PC端网页，网页会缩小展示
移动端： 手机分辨率 750px (物理像素) 视口 980px (CSS像素) 像素比：980/750=1:0.7 相当于一个css像素等价于0.7个物理像素。
2）案例
问题：一个900px的盒子在手机中如何显示?
900像素的盒子实质上在手机上只占750px物理像素。所以导致非常小的展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width:900px;
height:900px;
background-color: red;
}
</style>
<body>
<div></div>
</body>
</html>网页在移动端会缩放展示。并且无溢出。 ( 由上图可以看到900像素的盒子在手机中没有溢出。) 原因： 手机像素：750px * 1334px (物理像素) 视口： 900px (CSS像素) 像素比：900/750=1/0.7 一个CSS像素等价于0.7个物理像素。 并且手机的像素点比电脑的像素点更小，所以网页会缩放
2.3 为什么移动端网页需要专门编写
1.默认情况下，移动端浏览PC端网页，都会将视口设置为980px。以确保PC端网页在移动端正常使用。 不过由于像素比，PC端网页一般都是缩放展示，不会有很好的体验。 像素比: 980/750=1/0.7。 即一个CSS像素=0.7个物理像素。所以会缩放展示。 2. 基于此移动端网页一般都是专门编写。
三、设置完美视口
+++ 设置视口的作用 编写移动端网页时，我们必须有一个合理的像素比。 设置视口，就可以调节像素比。即调节一个CSS像素占多少个物理像素。 这样才能使网页合理显示。
3.1 手动设置视口
可以通过meta标签调节视口大小： <meta name="viewport" content="width=1000px"> 设置视口大小为1000px。
1）移动端浏览PC端网页，一般默认将视口设置为980px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width:900px;
height:900px;
background-color: red;
}
</style>
<body>
<div>
</div>
</body>
</html>2.）通过meta标签来设置视口。改变视口，就可以改变像素比。从而改变网页的显示方式
3.2 移动端完美视口
1.不同设备的完美视口是不同的。 所以如果我们通过meta标签指定固定的视口。只能是适配某个设备，而不是通用。 2.完美视口 1.每一个移动端设置时，都会有一个最佳的像素比。 一般我们只需要将网页的视口设置为该值即可，就可以得到很好的效果。 2.将像素比设置为最佳像素比的视口大小，我们称之为完美视口。 3.我们通过meta标签来指定完美视口。 3.为移动端设置完美视口 <meta name="viewport" content="width=device-width, initial-scale=1.0">
