響應式布局

響應式布局的各個問題：

1、響應式布局的優缺點

2、可實現的幾個方式

①百分比自適應布局

②通過**查詢（@media ）

③使用js根據瀏覽器裝置引用不同的css值

3、應用開發中實際使用

1、優點：

與以往的彈性盒子相比，響應式布局會更好的、更主動的根據使用者裝置變化更呈現出不同的效果，它比彈性盒子更靈活，可讀性更強。響應式的一套方案解決所有裝置的自適應問題。

2、缺點：

研發難度高，對應的css檔案可能是多個，也可能是單個。

百分比自適應布局：

1、首先允許網頁寬度自動調整

在網頁**的頭部，加入一行viewport元標籤。

**：　　

viewport 是指需要載入meta 標籤時讀取的名字為「視口」，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

缺點：在額外設定margin、padding時，或者使用不同瀏覽器時，會使得布局混亂

通過**查詢

三種寫法

1、直接在css中使用

寫法： @media 型別（常選all/screen）and (條件1) and (條件2)

}

這裡面的，第乙個 screen 意思為螢幕，這裡面還有許多引數，包括all（用於所有裝置）、print（用於印表機和列印預覽）、speech（應用於螢幕閱讀器等發聲裝置）。 通常直接寫all。

使用and來並列顯示多種情況，min-width 和max-width 來定義在那種尺寸的螢幕上顯示，這就是響應式的靈魂。

注意：在寫中間值的時候，必須把最大和最小範圍都標註上。

例如：

注意：

1.

2.ie678不支援@media 規則，若要相容，需要把響應式相關樣式寫到外部樣式表中，並引入respond.js

寫法：

@media screen and (max-width: 767px) 

}@media screen and (min-width: 992px) 
} @media screen and (min-width: 1200px) 
}@media screen and (min-width: 1500px) 
}

2、使用link鏈結css,media屬性可以設定**查詢方式：

media="all and (max-width: 800px)"/>

注意：使用此方法時，在style標籤中就不能寫樣式了。不然此方法就會失效。

3、使用import匯入，直接在url()後面使用空格，間隔**查詢規則：（不太常用）

@import url("css/02-響應式布局.css") all and (max-width: 800px);

優點：現在大部分的響應式布局都是使用@media 來實現的，可以書寫大量的公共樣式，在需要適應螢幕的時候，在大括號內加入相應的功能即可實現響應式布局。

缺點：可能需要對同乙個類書寫不同的樣式，**比較繁複，難度也稍微難點。

使用js引用不同的css值

根據不同瀏覽器：

根據不同解析度：

應用開發中實際使用

沒有哪一種方法是完美的，推薦的是三種方法交替使用，在恰當的地方使用恰當的方法。

在布局過程中，一般都是寬度的百分比與**查詢交替使用的，並且在載入網頁之前，加入meta標籤，定義一下viewport的內容，這樣更方便於移動端的響應。也兼顧了裝置的相容性。

而響應式的設計方案的一般做法就是根據目標使用者的訪問裝置的主要型別做三種或四種布局。每種布局有乙個區間，比如說小屏的手機分解析度可以設定為[320,640]。然後分別設計每種布局即可，一般來說，各個布局主要是調整模組的排列布局順序，內容調整越少越好（儘量減少使用者適應成本）。

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...

響應式布局

首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...