- 1153
-
-
-
-
-
響應(yīng)網(wǎng)頁設(shè)計(jì)的目標(biāo)是一個(gè)網(wǎng)站的外觀和UX無縫適應(yīng)不同的平臺(tái)。該技術(shù)還很年輕，在很多方面超過了可用的技術(shù)。
Trilibis已經(jīng)宣布推出的SNOW-軟件使一個(gè)網(wǎng)絡(luò)-旨在改善和解決的問題已經(jīng)放緩采納，我們能夠提供響應(yīng)式設(shè)計(jì)，使網(wǎng)站真正的設(shè)備感知：
響應(yīng)網(wǎng)站減緩
最近的347響應(yīng)網(wǎng)站，Akamai的研究發(fā)現(xiàn)，86％有相同的數(shù)據(jù)加載，無論他們能否全屏顯示。這意味著，在桌面計(jì)算機(jī)和帶寬有限的iPhone正在處理的數(shù)據(jù)量相同。
轉(zhuǎn)換為響應(yīng)的設(shè)計(jì)通常是指一個(gè)完整的網(wǎng)站，
通常情況下重建，布局和架構(gòu)必須完全重新考慮支持流體含量。
“響應(yīng)”，是指屏幕寬度，并沒有其他的參數(shù)，
您不能使用RWD目標(biāo)設(shè)備或?yàn)g覽器類型的內(nèi)容，或以其他方式優(yōu)化經(jīng)驗(yàn)，為特定的移動(dòng)用例。
不一致的瀏覽器
不支持所有設(shè)備和瀏覽器的支持響應(yīng)的設(shè)計(jì)方式相同。比以往任何時(shí)候都更多，從平臺(tái)到用戶彈出平臺(tái)，同時(shí)探索購買決定：響應(yīng)網(wǎng)站保持一致仍然是一個(gè)苦差事。
SNOW是HTML5標(biāo)準(zhǔn)的服務(wù)器端軟件，可以讓網(wǎng)頁設(shè)計(jì)師和開發(fā)人員能夠創(chuàng)建真正具有響應(yīng)性的多設(shè)備網(wǎng)站?；谝粋€(gè)單一的代碼庫，使用一個(gè)URL，站點(diǎn)建在整個(gè)陣列的設(shè)備與SNOW荷載快速和無縫地調(diào)整自己的布局和用戶體驗(yàn)到不同的平臺(tái)。
兩個(gè)主債權(quán)SNOW的網(wǎng)頁設(shè)計(jì)師是其維持和吸引了來自一個(gè)不斷更新的設(shè)備庫，并可以增強(qiáng)現(xiàn)有的網(wǎng)絡(luò)資產(chǎn)和代碼，而不是需要一個(gè)總的重建。
今天學(xué)習(xí)的一些media query課程內(nèi)容：
響應(yīng)式網(wǎng)頁設(shè)計(jì)，毫無疑問地變得越來越重要了。如果你還沒聽說過響應(yīng)式設(shè)計(jì)，可以先看看我之前發(fā)的文章響應(yīng)式網(wǎng)站。對(duì)新手來說,?響應(yīng)式設(shè)計(jì)聽起來可能會(huì)有點(diǎn)復(fù)雜, 但事實(shí)上，它比你想象的簡(jiǎn)單得多。為了讓你能快速入門，我準(zhǔn)備了一個(gè)簡(jiǎn)易的教程。通過這三個(gè)步驟，你一定可以了解響應(yīng)式設(shè)計(jì)的基本原理和media query（在你有一些CSS基礎(chǔ)的前提下）。
第一步.?Meta 標(biāo)簽 (查看?demo)
為了適應(yīng)屏幕，多數(shù)的移動(dòng)瀏覽器會(huì)把HTML網(wǎng)頁縮放到設(shè)備屏幕的寬度。你可以使用meta標(biāo)簽的viewport屬性來設(shè)置。下面的代碼告訴瀏覽器使用設(shè)備屏幕寬度作為內(nèi)容的寬度，并且忽視初始的寬度設(shè)置。這段代碼寫在 <head>里面
| 1 | <meta?name="viewport"?content="width=device-width, initial-scale=1.0"> |
IE8及以下的瀏覽器不支持media query。你可以使用media-queries.js?或?respond.js?。這樣IE就能支持media query了。
| 1 2 3 | <!--[if lt IE 9]>?<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>?<![endif]--> |
第二步.?HTML 結(jié)構(gòu)
這個(gè)例子里面，有header、content、sidebar和footer等基本的網(wǎng)頁布局。 header 有固定的高180px，content 容器的寬是600px，sidebar的寬是300px。
第三步.?Media Queries
CSS3 media query?響應(yīng)式網(wǎng)頁設(shè)計(jì)的關(guān)鍵。它像一個(gè)if語句，告訴瀏覽器如何根據(jù)特定的屏幕寬口來加載網(wǎng)頁。
如果屏幕窗口小于980px，下面的規(guī)則就生效。在這里，我設(shè)置了容器的寬度為百分比的形式而不是像素單位，這樣會(huì)更加靈活。
如果屏幕窗口小于700px， 定義 #content 和 #sidebar 為自適應(yīng)寬度，并移除它的浮動(dòng)屬性，這樣它會(huì)全屏顯示。
如果屏幕窗口小于480px (移動(dòng)設(shè)備的屏幕)， 設(shè)置#header 高為自適應(yīng)，把h1字體設(shè)置為24px，并且隱藏#sidebar。
這些media query，你可以寫很多。在這個(gè)demo，我只寫了三個(gè)。media query的目的是應(yīng)用不同的CSS規(guī)則來實(shí)現(xiàn)屏幕的最佳布局。它可以寫在同一個(gè)CSS文件，也可以寫在不同的文件。
學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計(jì)的一些國外HTML5課程
響應(yīng)CSS導(dǎo)航菜單案例：
式設(shè)計(jì)|響應(yīng)式設(shè)計(jì)教程 - 25學(xué)堂&pic=http://itlnk.cn/wp-content/uploads/2013/08/151.jpg&appkey=4085441834)
式設(shè)計(jì)|響應(yīng)式設(shè)計(jì)教程 - 25學(xué)堂&summary=&pics=http://itlnk.cn/wp-content/uploads/2013/08/151.jpg&flash=&site=SNOW旨在提高響應(yīng)式設(shè)計(jì)|響應(yīng)式設(shè)計(jì)教程 - 25學(xué)堂&desc=)
全站高品質(zhì)素材免費(fèi)下載！
