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

本章主要分為以下幾個(gè)部分

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

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

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

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

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

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

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

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

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

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