屏幕尺寸、屏幕分辨率、屏幕像素密度
屏幕尺寸：
指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。
常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
屏幕分辨率：（iphone6 750*1334）
指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1920*1080。（这里的1像素指的是物理设备的1个像素点）
屏幕像素密度/像素密度/屏幕密度：
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关
相同点：1.设备厂商规定的 2.固定的
物理像素,CSS像素
设备像素/物理像素：（分辨率）
买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，
一个点（小方格）为一个物理像素。
它是屏幕能显示的最小粒度.
设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
每个像素可以根据操作系统设置自己的颜色和亮度。
任何设备的物理像素的数量都是固定的
CSS像素：
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
它是为web开发者创造的，在css或者javascript中使用的一个抽象的层
一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。
在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。
css像素与物理像素的关系
一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于
屏幕的特性（是否是高密度,即像素比）和用户的缩放行为。
在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素
如果用户放大，它将跨越更多的设备像素
设备独立像素:设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，
这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，
然后由相关系统转换为物理像素。
位图像素：一个位图的像素是栅格图像(如：png, jpg, gif等)最小的数据单元
1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示
对于web开发者而言：
我们使用的每一个css和javascript定义的像素本质上代表的都是css像素，我们在开发过程中
并不在意一个css像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的
复杂计算交给了浏览器。
像素比
像素比:它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素
window.devicePixelRatio
视口和浏览器窗口
在普通的桌面端，视口的默认宽度和浏览器窗口的宽度一致。
在移动端,浏览器厂商面临着一个比较大的问题,他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的
呈现在移动端设备上,并且不会出现横向滚动条?
我们都知道pc端网页一般都为960px或者1024px，那么要完整的放下它们，
我们移动端浏览器必须要有个容器放下它吧，
而且只有有了这个容器我们才能很好的规定到底我移动端的浏览器到底能放下多大的页面吧
（可能大于960 页可能大于1024）。
这个数值最好大于960，而且设备间的这个容器大小是没有太大差异的
而且基于用户体验我们更关心width
移动端浏览器厂商是不是得做点什么了（这个容器应该由浏览器厂商设置）
在pc端：
我们浏览器的视口是要小于我们的屏幕的，一般默认情况下是等于
在移动端：
我们浏览器的视口（布局视口）是要远大于我们的屏幕的独立设备像素的
移动端浏览器厂商要实现的目标：
在小屏幕的移动设备上，尽可能的缩小网站来让用户看到网站的全貌
layout viewport和visual viewport
layout viewport:
手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
可以通过document.documentElement.clientWidth来获取 ，在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横向的布局都是按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。
visual viewport:
视觉视口与设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。
理想视口
我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是
用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！
只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta标签，
理想视口才会生效。
<meta name="viewport" content="width=device-width" />
这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致
width : 布局视口
device-width ： 设备独立像素代表的值
布局视口 = 视觉视口 = 理想视口
<meta name="viewport" content="width=device-width" />
width [pixel_value | device-width] width
-- 直接去设置具体数值大部分的安卓手机是不支持的 但是IOS支持
1.在桌面浏览器中,最干净的那个视口就是约束你的css布局的视口,它决定了用户能看到什么
2.在移动设备上,视口被分为了两个:布局视口限制了你的css布局,视觉视口会决定用户能看到什么
3.在移动设备上,还有一个理想视口,它是对于特定设备上特定浏览器的布局视口的一个理想尺寸
4.可以把布局视口的尺寸设置为理想视口,本质上,这就是移动端设计的基础
布局视口的宽度要大于视觉视口，且此时没有理想视口这一说。
由于视觉视口决定了用户能看到什么，我们想要让用户看到整个布局视口的内容，我们需要使视觉视口的尺寸跟布局视口一样大
我们可以认为布局视口和视觉视口之间有一段距离，这段距离的长短决定了缩放的程度。但仅仅是可以这么认为真正的缩放控制的不是他们之间的距离，他们之间本身也没有距离。
从技术层面上来讲,缩放就是放大或缩小css像素大小的过程,
改变的是视觉视口的尺寸（放大操作，看见的东西越来越少）
放大
会使一个css像素的面积变大
一个css像素所包含的物理像素个数变多
视觉视口所包含的css像素的个数变少
视觉视口变小
缩小（默认情况下（没有meta标签）其实已经有了一个缩小操作了）
会使一个css像素的面积变小
一个css像素所包含的物理像素个数变少
视觉视口所包含的css像素的个数变多
视觉视口变大
布局视口，视觉视口，理想视口其实最终代表的都是屏幕的尺寸
在屏幕这一块尺寸中，不同的视口它包含了多少个css像素的个数
布局视口：
默认情况下 980个css像素
加meta标签后 设备独立像素所代表的值
视觉视口：
用户放大或者系统放大时 视觉视口所包含的css像素的个数变少
用户缩小或者系统缩小时 视觉视口所包含的css像素的个数变多
理想视口
由于理想视口只在加meta后才会出现，理想视口的尺寸等于设备独立像素所代表的值
思考视口的主线
1.三个视口最终代表的就是屏幕尺寸
2.只不过在不同的条件下，三个视口所包含的css像素的个数存在差异
缩放
从技术层面上来讲,缩放就是放大或缩小css像素面积的过程,改变的是视觉视口的尺寸
放大
所包含的css像素的个数变少（视觉视口应该包含你设备独立像素值所对应的css像素）
缩小（默认情况下（没有meta标签）其实已经有了一个缩小操作了）
会使一个css像素的面积变小
一个css像素所包含的物理像素变少
视觉视口所包含的css像素的个数变多
移动端的缩放没有改变布局视口的任何东西！！！！！！！！！！！！！！！！！
pc端：
缩放会改变视口（视口变小）
移动端：
缩放会改变视觉视口的尺寸，不会改变布局视口的尺寸
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
