摘要：屏幕分辨率指在橫縱向上的像素點(diǎn)數(shù)，單位是，個(gè)像素點(diǎn)。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)物理像素像素設(shè)備像素物理像素分辨率買手機(jī)的時(shí)候會(huì)有一個(gè)的分辨率，那是屏幕的個(gè)呈像的點(diǎn)，一個(gè)點(diǎn)小方格為一個(gè)物理像素。

響應(yīng)式就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端—而不是為每個(gè)終端做一個(gè)特定的版本（響應(yīng)式開發(fā)一套界面）；隨之而來的就是我們熟知的自適應(yīng)，自適應(yīng)設(shè)計(jì)指能使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁設(shè)計(jì)方式及技術(shù)（需要開發(fā)多套界面）。

自適應(yīng)設(shè)計(jì) 通過檢測視口分辨率，來判斷當(dāng)前訪問的設(shè)備是：pc端、平板、手機(jī)，從而請求服務(wù)層，返回不同的頁面；響應(yīng)式設(shè)計(jì)通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容。

自適應(yīng) 對頁面做的屏幕適配是在一定范圍：比如pc端（>1024）一套適配,平板（768-1024）一套適配，手機(jī)端（<768）一套適配;響應(yīng)式一套頁面全部適配。（可以想象：響應(yīng)式設(shè)計(jì)要考慮的內(nèi)容要比自適應(yīng)設(shè)計(jì)復(fù)雜的多）

兩者都是優(yōu)化適應(yīng)互聯(lián)網(wǎng)中越來越分化的視口瀏覽體驗(yàn)，而出現(xiàn)的為視口提供更好的體驗(yàn)的技術(shù)。用技術(shù)來使頁面適應(yīng)不同分辨率的視口的設(shè)計(jì)。

面包屑菜單
改變?yōu)g覽器寬度會(huì)在不同分辨率下顯示不同的布局

面對不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問題

僅適用布局、信息、框架并不復(fù)雜的部門類型網(wǎng)站
兼容各種設(shè)備工作量大，效率低下
代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長
其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況

大多只是適配單個(gè)終端的主流N個(gè)主流視口（2-3個(gè)）
當(dāng)視口大小低于設(shè)置的最小視口時(shí)，界面會(huì)出現(xiàn)顯示不全，溢出，并出現(xiàn)橫向滑動(dòng)指示器（主要   出現(xiàn)在pc端，移動(dòng)端決不允許出現(xiàn)這種情況）
總體框架不變，橫線布局的板塊大多會(huì)有所減少

對網(wǎng)站的復(fù)雜程度兼容性更大
實(shí)施起來代價(jià)更低，
代碼更高效
測試更容易，運(yùn)營相對更精準(zhǔn)（圖片可控性更高）

在移動(dòng)端設(shè)計(jì)大行其道之下，同一個(gè)網(wǎng)站，往往需要為不同的設(shè)備開發(fā)不同的頁面，增加開發(fā)成本
當(dāng)需求改變時(shí)，可能會(huì)改動(dòng)多套代碼。流程繁瑣。

1.外部引入：

2.內(nèi)部：

@media screen and (min-width:0px) and (max-width:400px){
    //style樣式
}

一、

flex-wrap: nowrap (不換行，主軸方向空間不足默認(rèn)壓縮伸縮項(xiàng)目)
flex-wrap: wrap (換行，主軸方向空間不足換行)


flex-direction : (設(shè)置主軸的排列方向，規(guī)定了flex-start 和 flex-end的位置)
    row -- 行模式
    column  -- 列模式

二、沿主軸或者側(cè)軸排列伸縮項(xiàng)目
justify-content

- 控制伸縮項(xiàng)目在伸縮容器中，主軸(main)的排列方式。

align-items

- 控制伸縮項(xiàng)目在伸縮容器中，側(cè)軸(cross)的排列方式。

align-content:

- 控制伸縮項(xiàng)目，在在伸縮容器中，側(cè)軸(cross)的排列方式

前提條件：
    1.必須有兩行或者以上。

    2.flex-wrap: wrap
    3.設(shè)置伸縮項(xiàng)目，伸縮容器的寬度，導(dǎo)致水平空間不足。

三、設(shè)置伸縮項(xiàng)目的排列順序，沿著側(cè)軸對齊，壓縮率等
align-self

- 伸縮項(xiàng)目自己決定在伸縮容器中 ，側(cè)軸(cross)的排列方式
- 只能設(shè)置在  伸縮項(xiàng)目 中。

flex-grow

   - 分配伸縮容器的剩余空間
   - 只能設(shè)置在  伸縮項(xiàng)目 中。

order

    - 設(shè)置伸縮項(xiàng)目在 伸縮容器 排列順序 (flex-direction 決定排列方向)
    - 只能設(shè)置在  伸縮項(xiàng)目 中。

flex-shrink: 壓縮率 正整數(shù) 0 不壓縮， 默認(rèn)是1.
flex-basis: 伸縮項(xiàng)目 初始化的寬度 = width

相關(guān)鏈接：鏈接描述

想要了解適配，當(dāng)然少不了跟適配相關(guān)的一些基礎(chǔ)概念了呢

屏幕尺寸：
    指屏幕的對角線的長度，單位是英寸，1英寸=2.54厘米。
    常見的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
               
屏幕分辨率：（iphone6  750*1334）
    指在橫縱向上的像素點(diǎn)數(shù)，單位是px，1px=1個(gè)像素點(diǎn)。一般以縱向像素*橫向像素來表示一個(gè)手機(jī)的分辨率，如1960*1080。（這里的1像素指的是物理設(shè)備的1個(gè)像素點(diǎn)）
                
屏幕像素密度/像素密度/屏幕密度：
    屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，單位是ppi，即“pixels per inch”的縮寫。
    屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)
            

 設(shè)備像素/物理像素：（分辨率）
     買手機(jī)的時(shí)候會(huì)有一個(gè) n x m 的分辨率，那是屏幕的n x m個(gè)呈像的點(diǎn)，一個(gè)點(diǎn)（小方格）為一個(gè)物理像素。（它是屏幕能顯示的最小粒度）
            
    設(shè)備像素也被稱為物理像素,他是顯示設(shè)備中一個(gè)最微小的物理部件。
    每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。
                    
    任何設(shè)備的物理像素的數(shù)量都是固定的 
          
CSS像素：
    CSS像素是一個(gè)抽象的單位，主要使用在瀏覽器上，用來精確的度量（確定）Web頁面上的內(nèi)容。
            
    它是為web開發(fā)者創(chuàng)造的，在css或者javascript中使用的一個(gè)抽象的層
            
    一般情況下，CSS像素被稱為與設(shè)備無關(guān)的像素（device-independent像素），簡稱為“DIPs”。
    在一個(gè)標(biāo)準(zhǔn)的顯示密度下(普通屏)，一個(gè)CSS像素對應(yīng)著一個(gè)設(shè)備像素。
            
css像素與物理像素的關(guān)系
    一個(gè)width為200px的元素，它占據(jù)了200個(gè)css像素，但200個(gè)css像素占據(jù)多少個(gè)物理像素取決于 屏幕的特性（是否是高密度,即像素比）和用戶的縮放行為。
            
    在蘋果的視網(wǎng)膜屏幕上，視網(wǎng)膜的像素密度是普通屏幕的兩倍，這個(gè)元素就跨越了400個(gè)設(shè)備像素
    如果用戶放大，它將跨越更多的設(shè)備像素
            
設(shè)備獨(dú)立像素：設(shè)備獨(dú)立像素(也叫密度無關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，
    這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
                
位圖像素：一個(gè)位圖的像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元    
    1個(gè)位圖像素對應(yīng)于1個(gè)物理像素，圖片才能得到完美清晰的展示        
            
對于web開發(fā)者而言：
    我們使用的每一個(gè)css和javascript定義的像素本質(zhì)上代表的都是css像素，我們在開發(fā)過程中并不在意一個(gè)css像素到底跨越了多少個(gè)設(shè)備像素。我們將這個(gè)依賴于屏幕特性和用戶縮放程度的復(fù)雜計(jì)算交給了瀏覽器。

像素比:它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 /獨(dú)立像素  window.devicePixelRatio

    在普通的桌面端，視口的默認(rèn)寬度和瀏覽器窗口的寬度一致。

    在移動(dòng)端,瀏覽器廠商面臨著一個(gè)比較大的問題,他們?nèi)绾螌?shù)以萬計(jì)甚至可以說是數(shù)以億計(jì)的pc端網(wǎng)頁完整的
呈現(xiàn)在移動(dòng)端設(shè)備上,并且不會(huì)出現(xiàn)橫向滾動(dòng)條?
    如果這個(gè)時(shí)候,視口的寬度還是和瀏覽器窗口的寬度一致?我們都知道pc端網(wǎng)頁一般都為960px或者1024px，
那么要完整的放下它們，我們移動(dòng)端瀏覽器必須要有個(gè)容器放下它吧，而且只有有了這個(gè)容器我們才能很好的規(guī)定到底我移動(dòng)端的
瀏覽器到底能放下多大的頁面吧（可能大于960 頁可能大于1024）。這個(gè)數(shù)值最好大于960，而且設(shè)備間的這個(gè)容器大小是沒有
太大差異的    

    而且基于用戶體驗(yàn)我們更關(guān)心width
    

    在pc端：
        我們?yōu)g覽器的視口（初始包含塊，視口）是要小于我們的屏幕的，一般默認(rèn)情況下是等于
                
    在移動(dòng)端：
        我們?yōu)g覽器的視口（布局視口）是要遠(yuǎn)大于我們的屏幕的獨(dú)立設(shè)備像素的
        
    移動(dòng)端瀏覽器廠商要實(shí)現(xiàn)的目標(biāo)：
        在小屏幕的移動(dòng)設(shè)備上，盡可能的縮小網(wǎng)站來讓用戶看到網(wǎng)站的全貌
        
    他們做到了，但是問題又來了：
        在小屏幕的移動(dòng)設(shè)備上，如果設(shè)備屏幕視口的寬度和瀏覽器窗口的寬度一樣會(huì)導(dǎo)致很丑陋的結(jié)果，所有的布局都會(huì)被壓在一起。
所以在移動(dòng)端瀏覽器上遇到一個(gè)沒有為移動(dòng)端做優(yōu)化的網(wǎng)站，它會(huì)盡可能的縮小網(wǎng)站來讓用戶看到網(wǎng)站的全貌。這對用戶的體驗(yàn)來說，是一件非?？膳碌氖虑?。如果你想在一個(gè)小小的手機(jī)屏幕上顯示一個(gè)為桌面設(shè)計(jì)的網(wǎng)站，你必須得舍棄一些布局。    

layout viewport:
        手機(jī)上，為了容納為桌面瀏覽器設(shè)計(jì)的網(wǎng)站，默認(rèn)的布局視口的寬度遠(yuǎn)大于屏幕的寬度

        布局視口的出現(xiàn)，在極大程度上幫助了桌面網(wǎng)站到移動(dòng)設(shè)備上的轉(zhuǎn)移。
        
        可以通過document.documentElement.clientWidth來獲取 
            在pc端，多帶帶一個(gè)width為20%的元素最終拿到的值要根據(jù)初始包含塊的width來決定，因?yàn)槲覀儥M向的布局都是
        按初始包含塊開始填的，在移動(dòng)端一樣，不過我們這個(gè)時(shí)候應(yīng)該叫它布局視口。
        
        
visual viewport:
        視覺視口與設(shè)備屏幕一樣寬，并且它的css像素的數(shù)量會(huì)隨用戶的縮放而改變

        visual viewport的寬度可以通過window.innerWidth 來獲取，
                但在Android 2, Oprea mini 和 UC 8中無法正確獲取。
                

我們分析知道：布局視口的默認(rèn)寬度并不是一個(gè)理想的寬度，對于我們移動(dòng)設(shè)備來說，最理想的情況是
用戶剛進(jìn)入頁面時(shí)不再需要縮放。這就是為什么蘋果和其他效仿蘋果的瀏覽器廠商會(huì)引進(jìn)理想視口！

只有是專門為移動(dòng)設(shè)備開發(fā)的網(wǎng)站，他才有理想視口這一說。而且只有當(dāng)你在頁面中加入viewport的meta標(biāo)簽，理想視口才會(huì)生效。


這一行代碼告訴我們，布局視口的寬度應(yīng)該與理想視口的寬度一致


css傳統(tǒng)的單位有：px、%、em，而隨著技術(shù)的發(fā)展，css3增加了一些新的單位rem、vh、vw、vm等，使我們的web頁面能適應(yīng)各種不同的終端顯示，現(xiàn)在我們來看看這些單位的區(qū)別，這樣對后面進(jìn)行視口之間的適配有直接的幫助
- pixel（像素）是圖像的基本采樣單位。所以它不是一個(gè)確定的物理量，也不是一個(gè)具體的點(diǎn)或者小方塊（盡管可以用點(diǎn)和小方塊來呈現(xiàn)），而是一個(gè)抽象概念,單位面積內(nèi)的像素，可大可小,是相對于顯示器屏幕分辨率而言的.用PX設(shè)置字體大小時(shí)，比較穩(wěn)定和精確。但是這種方法存在一個(gè)問題，當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁面時(shí)，如果改變了瀏覽器的縮放，這時(shí)會(huì)使用我們的Web頁面布局被打破.
- em相對長度單位。em是相對于父元素的font-size而計(jì)算的。如果當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體(16px)尺寸。 這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素都要根據(jù)其父元大小設(shè)置。
- Rem是相對于根元素html字體大小，這樣就意味著，我們只需要在根元素確定一個(gè)參考值。
- %一般來說是相對于父元素來講
- viewpoint width（vw），視窗寬度，1vw等于視窗寬度的1%。如果瀏覽器的寬是500px, 1vw為5px(還有vh等)（盡管%和vw在很多地方都很相似 在使用的過程中還是要注意 在出現(xiàn)豎向滾動(dòng)條的時(shí)候vw=%+滾動(dòng)條的寬度）。

相關(guān)鏈接：鏈接描述

經(jīng)過上面一頓暈頭轉(zhuǎn)向的理解，接下來看幾個(gè)常用的居中形式吧（工作中肯定經(jīng)常碰到的）

是不是以為我又會(huì)長篇大論，才不會(huì)， 我沒這么傻， 來老鐵--> [鏈接描述][3]
https://blog.csdn.net/mars2009/article/details/79683924

鏈接描述