關於響應式web設計

手機**+電腦**+平版** = 響應式**

首先是[1]的設定：大多數手機的瀏覽器核心是居於webkit核心，且大多數瀏覽器都支援使用viewport meta元素覆蓋預設的畫布縮放。所以我們可以在head中插入乙個meta設定具體的寬度或者縮放比例。

width = device-width 瀏覽器頁面的寬度等於裝置的寬度，user-scalable = no,靜止縮放，若為1.0則是：瀏覽器頁面安裝視口大小渲染頁面，maximum-scale minimum-scale 最大最小縮放頁面到裝置寬度的幾倍。

針對ie瀏覽器的一些設定，因為css3是響應式關鍵技術，但是ie瀏覽器的支援有限，所以上訴**的意思是：

告訴ie瀏覽器，ie8/9及以後的版本都會以最高版本ie來渲染頁面。具體有關這個的可參考這個部落格

設定了viewport meta標籤後頁面不縮放了，我們可以根據css3的**查詢針對不同視口的寬度進行修正

csss3**查詢

@media only screen and (max-width:30em){};
@media only screen and (max-width:50em){};
@media only screen and (min-width:30em) and (max-width:50em){};
@media print{}//列印樣式

最大寬度是50em中寫的樣式，在 30em < width < 50em 中一樣的效果，所以不用重複寫

百分比布局和rem em

使用百分比布局建立流動的彈性介面：

即是將元素固定尺寸轉換為相對尺寸，公式：目標元素的寬度/上下文元素的寬度=百分比寬度，引用自書本《無懈可擊的web設計》。

當被包裹的元素有border時，若不想border隨上下文變寬或便窄，可以將被包裹元素減去兩邊的border，然後再用那個公式。

同理，padding-left,padding-right,以及margin-right，margin-left的大小也是一樣的道理。

然後就是頁面字型的大小了。

em 相對的也是上下文，rem（root em ）相對的是html根元素，

html .parent .son html .parent .son //我見一些前輩大都這樣設定,我知道後也比較喜歡這個， //因為不會像em那樣產生巢狀混亂的問題，也可以很方便的設定24，28這樣數值。 html .parent .son

彈性

img .side img 但是這種會導致在視口很大的時候被拉長，所以可以這樣 .side img

響應式（載入與裝置相匹配的）

sizes="(max-width: 360px) 340px, 128px"/>//srcset用來指向提供的資源,sizes用來表示尺寸臨界點，響應響應式布局

//ie均不支援，不過edg相容模式支援

還有就是之前的js來監聽window.resize事件，以及svg，我對svg 不熟，就不說了。

在響應式裡面其實還涉及到了物理畫素，邏輯畫素，dpi等，但我覺得新的方案裡面不需要我們寫 1x 2x 那些了，我就寫了先，因為我對這個也只知道大概~

希望下次可以填滿點，如果有錯誤，歡迎指正~

關於響應式web設計

響應式web設計

響應式web設計

響應式Web設計

相關推薦