響應(yīng)式布局的開發(fā)基礎(chǔ)知識

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

•正確理解響應(yīng)式設(shè)計
•響應(yīng)式設(shè)計的步驟
•響應(yīng)式設(shè)計需要注意的問題
•響應(yīng)式網(wǎng)頁布局實(shí)現(xiàn)原理

第一：正確理解響應(yīng)式布局

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

第二：響應(yīng)式設(shè)計的步驟

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

言歸正傳，博主因?yàn)槭桥俑鶈柕讛r不組的，所以在此就往響應(yīng)式設(shè)計的祖墳上刨，深入了解下這四個步驟。

1.布局及設(shè)置meta標(biāo)簽

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

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

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表