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

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

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

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

兩者都是優化適應互聯網中越來越分化的視口瀏覽體驗，而出現的為視口提供更好的體驗的技術。用技術來使頁面適應不同分辨率的視口的設計。

面包屑菜單
改變瀏覽器寬度會在不同分辨率下顯示不同的布局

面對不同分辨率設備靈活性強
能夠快捷解決多設備顯示適應問題

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

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

對網站的復雜程度兼容性更大
實施起來代價更低，
代碼更高效
測試更容易，運營相對更精準（圖片可控性更高）

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

1.外部引入：

2.內部：

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

一、

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


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

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

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

align-items

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

align-content:

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

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

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

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

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

flex-grow

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

order

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

flex-shrink: 壓縮率 正整數 0 不壓縮， 默認是1.
flex-basis: 伸縮項目 初始化的寬度 = width

相關鏈接：鏈接描述

想要了解適配，當然少不了跟適配相關的一些基礎概念了呢

屏幕尺寸：
    指屏幕的對角線的長度，單位是英寸，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個像素點。一般以縱向像素*橫向像素來表示一個手機的分辨率，如1960*1080。（這里的1像素指的是物理設備的1個像素點）
                
屏幕像素密度/像素密度/屏幕密度：
    屏幕上每英寸可以顯示的像素點的數量，單位是ppi，即“pixels per inch”的縮寫。
    屏幕像素密度與屏幕尺寸和屏幕分辨率有關
            

 設備像素/物理像素：（分辨率）
     買手機的時候會有一個 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:
        手機上，為了容納為桌面瀏覽器設計的網站，默認的布局視口的寬度遠大于屏幕的寬度

        布局視口的出現，在極大程度上幫助了桌面網站到移動設備上的轉移。
        
        可以通過document.documentElement.clientWidth來獲取 
            在pc端，多帶帶一個width為20%的元素最終拿到的值要根據初始包含塊的width來決定，因為我們橫向的布局都是
        按初始包含塊開始填的，在移動端一樣，不過我們這個時候應該叫它布局視口。
        
        
visual viewport:
        視覺視口與設備屏幕一樣寬，并且它的css像素的數量會隨用戶的縮放而改變

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

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

只有是專門為移動設備開發的網站，他才有理想視口這一說。而且只有當你在頁面中加入viewport的meta標簽，理想視口才會生效。


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


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

相關鏈接：鏈接描述

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

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

鏈接描述