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

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

•正確理解響應式設計
•響應式設計的步驟
•響應式設計需要注意的問題
•響應式網頁布局實現原理

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

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

第二：響應式設計的步驟

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

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

1.布局及設置meta標簽

當創建一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的布局。我在創建響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那么我在去添加媒體查詢（Media Query)和響應式代碼。這種操作更容易實現響應式特性。

當你完成當你已經完成了無響應的網站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標簽之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，并禁止用戶縮放頁面。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表