4个像素
物理
css
独立
位图
3个视口
布局
视觉
理想
2个操作
放大
缩小
1个比例
像素比
布局视口和视觉视口
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" />
这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致
css像素能不能代表一个设备的大小？如果能代表，这个值确不确定?
能 不确定
屏幕大小之间的比较应该使用绝对单位:屏幕尺寸
物理像素与css像素比例的维护是谁在维护？ 维护规则是什么？
视觉视口(1.决定用户能看到什么；2.包住整个布局视口)
物理像素:屏幕的分辨率
css像素: 布局视口尺寸
加name为viewport的meta标签
像素比
没有加name为viewport的meta标签
布局视口尺寸 / 屏幕的分辨率
四个像素之间的关系
设备独立像素
物理/设备像素
css像素
位图像素
物理像素和设备独立像素:
像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数 =2;
物理像素和位图像素:
1:1的时候才能完美清晰的展示
物理像素和css像素
普通屏:1比1
高清屏:
加name为viewport的meta标签
像素比
没有加name为viewport的meta标签
布局视口尺寸 / 屏幕的分辨率
css像素和设备独立像素
没有加name为viewport的meta标签:没有关系
加name为viewport的meta标签:可以认为css像素就是设备独立像素
注意@2x 和 @3x图的使用
像素比 到底是什么
像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数 =2;
理想视口什么时候出现？ 像素比什么时候有用？
加name为viewport的meta标签
理想视口与设备之间的关系
理想视口的尺寸：设备独立像素所代表的值
不同浏览器在同一设备上理想视口的尺寸可能会不一样
一款浏览器在不同设备上理想视口的尺寸可能会不一样
思考视口的主线
本质上三个视口的物理尺寸就是屏幕尺寸
在不一样的情况下，各个视口所包含的css像素的个数是不一样的
布局视口包含的css像素的个数
980 1024 （浏览器不一样）
视觉视口包含的css像素的个数
默认情况（css像素和物理像素1:1）---> 屏幕的分辨率
移动端浏览器初始化的时候（视觉视口必须要包住布局视口） ---> 布局视口包含的css像素的个数就是视觉视口所包含的
用户缩放（只影响视觉视口）
放大---> 视觉视口包含的css像素的个数变少
缩小---> 视觉视口包含的css像素的个数变多
理想视口包含的css像素的个数
设备独立像素所代表的值
缩放
pc端的缩放:会改变元素的布局（布局视口）
移动端（缩放只改变视觉视口内css像素的个数）
放大
使css像素变大，一个css像素所包含的物理像素的个数变多，元素变的更大
视觉视口内，css像素的个数变少
缩小
使css像素变小，一个css像素所包含的物理像素的个数变少，元素变的更小
视觉视口内，css像素的个数变多
怎么获取三个视口的值
布局视口：document.documentElement.clientWidth(基本没有兼容性问题)
视觉视口：window.innerWidth（有一点兼容性问题）
理想视口：screen.width（兼容性问题极大）
完美视口以及meta标签
过大的元素--->完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
哪些操作会影响布局视口
width=320
initial-scale=2.0
等比问题
没有加name为viewport的meta标签
一个相同css像素大小的区域在不同的设备是等比的,
在不同的设备上占据的实际物理大小（英寸）不一样
加name为viewport的meta标签
一个相同css像素大小的区域在不同的设备是不等比的,
在不同的设备上占据的实际物理大小（英寸）是一样的
等比是不是一个必须的需要？
百分百还原设计图 ---> 在不同设备上要等比（文字要完美清晰的展示）
----> 必须加meta标签（不等比）
---> 适配！！！！（加上meta标签后也得等比）
