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

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

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

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

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

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

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

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

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

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

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

1.外部引入：

2.內(nèi)部：

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

一、

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


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

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

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

align-items

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

align-content:

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

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

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

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

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

flex-grow

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

order

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

flex-shrink: 壓縮率 正整數(shù) 0 不壓縮， 默認(rèn)是1.
flex-basis: 伸縮項目 初始化的寬度 = 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）
    指在橫縱向上的像素點數(shù)，單位是px，1px=1個像素點。一般以縱向像素*橫向像素來表示一個手機的分辨率，如1960*1080。（這里的1像素指的是物理設(shè)備的1個像素點）
                
屏幕像素密度/像素密度/屏幕密度：
    屏幕上每英寸可以顯示的像素點的數(shù)量，單位是ppi，即“pixels per inch”的縮寫。
    屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)
            

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

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

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

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

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

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

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)簽，理想視口才會生效。


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


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

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

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

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

鏈接描述