響應式佈局

響應式佈局是爲了一個網站兼容多個終端，而不是每一個終端都去單獨寫一個網頁。

一般狀況下，咱們把分辨率分爲四種：

1.超大屏幕：寬度>1200px

2.中等屏幕：1000px<寬度<1200px

3.小屏幕：768px~1000px

4.超小屏幕：768px如下

 

咱們在進行響應式佈局的時候，常採用的媒體查詢的方式，媒體查詢是經過在不一樣的分辨率下設置不一樣的樣式來達到咱們的目的，

媒體查詢有兩種方法，語法以下：

 

示例一：在link中使用@media：

    <link rel=「stylesheet」 type=「text/css」 media=「only screen and （max-width： 480px），only screen and （max-device-width： 480px）」 href=「link.css」/>

    上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。

    示例二：在樣式表中內嵌@media：

@media screen and (min-width:1200px){

　　.all{background:red}

}//在超大屏幕下進行設置

 

@media screen and （min-width:1000px） and (max-width:1200px){

　　.all{width:160px}

}//在中等屏幕下進行設置

 

@media screen and （min-width:768px） and (max-width:1000px){

　　.all{width:100px}

}//在小屏幕下進行設置

 

@media screen and (max-width:768px){

　　.all{width:100%}

}//在超小屏幕下進行設置

 

咱們把想要顯示的不一樣效果寫在不一樣的屏幕設置下，就能讓網頁實現響應式佈局了。

 

優勢：
    面對不一樣分辨率設備靈活性強
    可以快捷解決多設備顯示適應問題

    缺點：
    兼容各類設備工做量大，效率低下
    代碼累贅，會出現隱藏無用的元素，加載時間加長
    其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
    必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

 

在bootstrap中，它自帶響應式佈局，咱們就能夠用它內部的方法實現，利用col-lg-x，col-md-x，col-sm-x，col-xs-x來設置樣式。