響應式布局總結推薦

響應式布局的開發基礎知識

本章主要分為以下幾個部分

•正確理解響應式設計

•響應式設計的步驟

•響應式設計需要注意的問題

•響應式網頁布局實現原理

第一：正確理解響應式布局

響應式網頁設計就是乙個**能夠相容多個終端-而不是為每個終端做乙個特定的版本。打個比方來說：現在社會有很多響應產品，例如摺疊沙發，折疊床等等，當我們需要把沙發放到乙個角落的時候，此刻沙發就好比div吧，而角落裡的某個地方就好比父元素，由於父元素空間的改變，我們不得不調整div,讓它能夠依然放在角落裡。在專案中你會遇到不同的終端，由於終端解析度不同，所以你要想讓使用者體驗更好，就必要讓你的頁面能夠相容多個終端。

第二：響應式設計的步驟

了解了什麼是響應式，那麼接下來我們就要說說響應式設計的步驟，有人這時候會說「博主，你傻啊，響應式設計的步驟不就是1.編寫非響應式**、2.加工成響應式**、3.響應式細節處理、4.完成響應式開發嗎？」博主菊花一震原來高手在民間啊，微微一硬表示敬重，我去，說錯了是微微一笑，大家不要誤會啊。

言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。

1.布局及設定meta標籤

當建立乙個響應式**，或者非響應式**變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去新增**查詢（media query)和響應式**。這種操作更容易實現響應式特性。

當你完成當你已經完成了無響應的**，做的第一件事是在你的 h 頁面，貼上下面的**到和標籤之間。這將設定螢幕按1：1的尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。

xml/html code複製內容到剪貼簿

2.通過**查詢來設定樣式media query

media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如乙個終端的解析度小於980px，那麼可以這樣寫

xml/html code複製內容到剪貼簿

3.設定多種檢視寬度

假如我們要相容ipad和iphone檢視，我們可以這樣設定：

xml/html code複製內容到剪貼簿

3.字型設定

到目前為止，開發人員用到的字型單位大部分都是畫素，雖然畫素在普通**上是ok的，但是我們仍然需要響應式字型。乙個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。

css3引入了新的單位叫做rem,和em類似但對於html元素，rem更方便使用。

rem是相對於根元素的，不要忘記重置根元素字型大小：

xml/html code複製內容到剪貼簿

4.響應式設計需要注意的問題

1.寬度不固定，可以使用百分比

xml/html code複製內容到剪貼簿

2.處理

在這裡我給大家一把鑰匙,有人會說，博主，能不能別裝逼？處理還有啥鑰匙，你以為是開門啊，博主，醒醒吧

哎喲，我這暴脾氣，我說的鑰匙不是真的鑰匙，而是指處理的萬能方法，是什麼呢？就是液態化。接著會有人問：「什麼是液態化」呢？這個問題問的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無形能適合很多容器，那麼假如我們把當做水是不是就可以實現自適應問題了呢？

在html頁面中的，比如文章裡插入的我們都可以通過css樣式max-width來進行控制的最大寬度，如：

xml/html code複製內容到剪貼簿

除了img標籤的外我們經常會遇到背景，比如logo為背景：

xml/html code複製內容到剪貼簿

最後我們來總結下響應式布局的實現原理

首先我們應該遵循移動端優先，互動和設計以移動端為主，pc則作為移動端的擴充套件，乙個頁面需要相容不同終端，那麼有兩個關鍵點是我們需要去做到響應式的：響應式布局和響應式內容（、多**）

xml/html code複製內容到剪貼簿

我知道各位還在期待什麼，無圖無真相，無dome不是瞎說嗎，紙上談兵，放心各位，博主不會這麼討打的下面就貢獻出個人製作的響應式布局dome.

xml/html code複製內容到剪貼簿

好了博主絞盡乳汁的成果就在這裡了，下次我會總結下移動端的布局。

原文位址：

本文位址:

響應式布局總結 推薦

響應式布局總結

響應式布局總結

（總結）flex layout響應式布局

相關推薦

響應式布局總結推薦