4個像素
    物理
    css
    獨立
    位圖
3個視口
    布局
    視覺
    理想
2個操作
    放大
    縮小
1個比例
    像素比

布局視口和視覺視口

layout viewport:
        手機上，為了容納為桌面瀏覽器設(shè)計的網(wǎng)站，默認(rèn)的布局視口的寬度遠大于屏幕的寬度
        布局視口的出現(xiàn)，在極大程度上幫助了桌面網(wǎng)站到移動設(shè)備上的轉(zhuǎn)移。
        可以通過document.documentElement.clientWidth來獲取 
            在pc端，單獨一個width為20%的元素最終拿到的值要根據(jù)初始包含塊的width來決定，因為我們橫向的布局都是
        按初始包含塊開始填的，在移動端一樣，不過我們這個時候應(yīng)該叫它布局視口。
visual viewport:
        視覺視口語設(shè)備屏幕一樣寬，并且它的css像素的數(shù)量會隨用戶的縮放而改變
        visual viewport的寬度可以通過window.innerWidth 來獲取，
                但在Android 2, Oprea mini 和 UC 8中無法正確獲取。

理想視口

我們分析知道：布局視口的默認(rèn)寬度并不是一個理想的寬度，對于我們移動設(shè)備來說，最理想的情況是
用戶剛進入頁面時不再需要縮放。這就是為什么蘋果和其他效仿蘋果的瀏覽器廠商會引進理想視口！
只有是專門為移動設(shè)備開發(fā)的網(wǎng)站，他才有理想視口這一說。而且只有當(dāng)你在頁面中加入viewport的meta標(biāo)簽，
理想視口才會生效。
<meta name="viewport" content="width=device-width" />
這一行代碼告訴我們，布局視口的寬度應(yīng)該與理想視口的寬度一致

css像素能不能代表一個設(shè)備的大小？如果能代表，這個值確不確定?

        能               不確定
        
        屏幕大小之間的比較應(yīng)該使用絕對單位:屏幕尺寸

物理像素與css像素比例的維護是誰在維護？ 維護規(guī)則是什么？

        視覺視口(1.決定用戶能看到什么；2.包住整個布局視口)
            物理像素:屏幕的分辨率
            css像素: 布局視口尺寸
        
        加name為viewport的meta標(biāo)簽
            像素比
        沒有加name為viewport的meta標(biāo)簽
            布局視口尺寸 / 屏幕的分辨率

四個像素之間的關(guān)系

        設(shè)備獨立像素
        物理/設(shè)備像素
        css像素
        位圖像素
        
        物理像素和設(shè)備獨立像素:
            像素比: 一個方向上占據(jù)一塊屏幕所需要的物理像素的個數(shù) /一個方向上占據(jù)一塊屏幕所需要的設(shè)備獨立像素的個數(shù)  =2;
        
        物理像素和位圖像素:
            1:1的時候才能完美清晰的展示
        
        物理像素和css像素
            普通屏:1比1
            高清屏: 
                加name為viewport的meta標(biāo)簽
                    像素比
                沒有加name為viewport的meta標(biāo)簽
                    布局視口尺寸 / 屏幕的分辨率
        
        css像素和設(shè)備獨立像素
            沒有加name為viewport的meta標(biāo)簽:沒有關(guān)系
            加name為viewport的meta標(biāo)簽:可以認(rèn)為css像素就是設(shè)備獨立像素
            
        注意@2x 和 @3x圖的使用

像素比 到底是什么

像素比: 一個方向上占據(jù)一塊屏幕所需要的物理像素的個數(shù) /一個方向上占據(jù)一塊屏幕所需要的設(shè)備獨立像素的個數(shù)  =2;

理想視口什么時候出現(xiàn)？ 像素比什么時候有用？

加name為viewport的meta標(biāo)簽           

理想視口與設(shè)備之間的關(guān)系

理想視口的尺寸：設(shè)備獨立像素所代表的值

不同瀏覽器在同一設(shè)備上理想視口的尺寸可能會不一樣
一款瀏覽器在不同設(shè)備上理想視口的尺寸可能會不一樣

思考視口的主線

    本質(zhì)上三個視口的物理尺寸就是屏幕尺寸
        在不一樣的情況下，各個視口所包含的css像素的個數(shù)是不一樣的
        
        布局視口包含的css像素的個數(shù)
            980 1024 （瀏覽器不一樣）
        
        視覺視口包含的css像素的個數(shù)
            默認(rèn)情況（css像素和物理像素1:1）---> 屏幕的分辨率
            移動端瀏覽器初始化的時候（視覺視口必須要包住布局視口）  ---> 布局視口包含的css像素的個數(shù)就是視覺視口所包含的
            用戶縮放（只影響視覺視口）
                放大---> 視覺視口包含的css像素的個數(shù)變少
                縮小---> 視覺視口包含的css像素的個數(shù)變多
        
        理想視口包含的css像素的個數(shù)
            設(shè)備獨立像素所代表的值

縮放

pc端的縮放:會改變元素的布局（布局視口）

移動端（縮放只改變視覺視口內(nèi)css像素的個數(shù)）
        放大
            使css像素變大，一個css像素所包含的物理像素的個數(shù)變多，元素變的更大
            視覺視口內(nèi)，css像素的個數(shù)變少
        
        縮小
            使css像素變小，一個css像素所包含的物理像素的個數(shù)變少，元素變的更小
            視覺視口內(nèi)，css像素的個數(shù)變多

怎么獲取三個視口的值

布局視口：document.documentElement.clientWidth(基本沒有兼容性問題)
視覺視口：window.innerWidth（有一點兼容性問題）
理想視口：screen.width（兼容性問題極大）

完美視口以及meta標(biāo)簽

過大的元素--->完美視口
    <meta name="viewport" content="width=device-width,initial-scale=1.0"  />

哪些操作會影響布局視口

width=320
initial-scale=2.0

等比問題

沒有加name為viewport的meta標(biāo)簽
    一個相同css像素大小的區(qū)域在不同的設(shè)備是等比的,
            在不同的設(shè)備上占據(jù)的實際物理大小（英寸）不一樣

加name為viewport的meta標(biāo)簽
    一個相同css像素大小的區(qū)域在不同的設(shè)備是不等比的,
        在不同的設(shè)備上占據(jù)的實際物理大小（英寸）是一樣的
        
等比是不是一個必須的需要？
    百分百還原設(shè)計圖 ---> 在不同設(shè)備上要等比（文字要完美清晰的展示）
                                            ----> 必須加meta標(biāo)簽（不等比）
                                                ---> 適配！！！！（加上meta標(biāo)簽后也得等比）