Responsive Design對于我來(lái)說(shuō)一點(diǎn)都不陌生，從他在這個(gè)互聯(lián)網(wǎng)出現的時(shí)候，就一直在觀(guān)注他的成長(cháng)，而且在w3cplus站上也分享了很多這方面的教程和資源。由于組織了YY活動(dòng)在線(xiàn)上和大家分享Responsive的設計，為了能讓大家更好的理解，我自己也有必要好好的做一下功課，今天這個(gè)就是功課，想和大家一起分享一下Responsive設計的一些基本技巧，和相對應的學(xué)習資源，希望對大家有所幫助。
什么是Responsive設計？有的同學(xué)認為Responsive設計是自適應布局，也有的同學(xué)認為Responsive是網(wǎng)格布局。其實(shí)這些想法都不正確。Wikipedia對Responsive做了詳細的描述，我在這里就簡(jiǎn)單的說(shuō)一下。Responsive設計簡(jiǎn)單的稱(chēng)為RWD，是精心提供各種設備都能閱讀網(wǎng)頁(yè)的一種設計方法，RWD能讓你的網(wǎng)頁(yè)在不同的設備中展現成不同的設計風(fēng)格。從這一點(diǎn)描述來(lái)說(shuō)，Responsve既不是流體布局，也不是什么網(wǎng)格布局，他是一種獨特的網(wǎng)頁(yè)設計方法。
Responsive設計無(wú)疑是網(wǎng)頁(yè)設計中的一個(gè)熱門(mén)話(huà)題。某種程度上，他將是一個(gè)最受歡迎的網(wǎng)頁(yè)設計概念，因為隨著(zhù)網(wǎng)站用戶(hù)日漸多樣化的訪(fǎng)問(wèn)方法，比如說(shuō)“iPad”、“iPhone”、“Android移動(dòng)設備”、“平板電腦”、“臺式機”以及“ 筆記本”等不同形式的顯屏出現。這樣我們以前那樣的網(wǎng)頁(yè)設計就無(wú)法在適合上述各種設備的瀏覽，這也給我們后續的網(wǎng)頁(yè)設計提出了一個(gè)全新的設計概念 Responsive設計。讓我們的網(wǎng)頁(yè)能適應各種平臺、各種設備上渲染。
這個(gè)時(shí)候可能又有人會(huì )心生疑問(wèn)，是不是Responsive是用來(lái)制作Mobile頁(yè)面的？這個(gè)問(wèn)題我經(jīng)常聽(tīng)到有同學(xué)問(wèn)？其實(shí)這是一個(gè)很簡(jiǎn)單的問(wèn)題，Mobile頁(yè)面和我們平時(shí)的頁(yè)面制作基本上是一樣的，只不過(guò)大小不一樣，其中稍有細節需要注意，從這一點(diǎn)出發(fā)，如果就Responsive設計是用來(lái)制作Mobile頁(yè)面并不妥，只能說(shuō)Responsive設計能讓你的頁(yè)面在Mobile上顯示的更加完美。說(shuō)到這，可能你會(huì )感覺(jué)到 Responsive到底是什么？又怎么使用？我又要怎么學(xué)習呢？其實(shí)這些都不是問(wèn)，接下來(lái)和大家分享一下學(xué)習或者說(shuō)使用Responsive設計的一些基本技巧，以及對應的學(xué)習資源。
一、保持一個(gè)簡(jiǎn)單的布布局
布局是一個(gè)在簡(jiǎn)單不過(guò)的問(wèn)題了，也是每個(gè)網(wǎng)頁(yè)設計中必須包含的部分，但我們使用Responsive設計第一步要做的事情就是讓你的頁(yè)面布局盡量的簡(jiǎn)單。實(shí)現一個(gè)簡(jiǎn)單的布局，我們有一些小技巧：
Responsive布局技巧
在Responsive布局中，我們可以毫無(wú)保留的丟棄：
1.盡量少用無(wú)關(guān)緊要的div
2.不使用內聯(lián)元素(inline)
3.盡量少用js或flash
4.丟去沒(méi)用的絕對定位和浮動(dòng)樣式
5.屏棄任何冗余結構和不使用100%設置
有舍才有得，丟去了一些對Responsive有影響的東東，那么有哪些東東能幫助Responsive確定更好的布局呢？
1.使用HTML5 Doctype和相關(guān)指南
2.重置好你的樣式（reset.css）
3.一個(gè)簡(jiǎn)單的有語(yǔ)義的核心布局
4.給重要的網(wǎng)頁(yè)元素使用簡(jiǎn)單的技巧，比如導航菜單之類(lèi)元素
使用這些技巧，無(wú)非是為了保持你的HTML簡(jiǎn)單干凈，而且在你的頁(yè)面布局中的關(guān)鍵部分（元素）不要過(guò)分的依賴(lài)現代技巧來(lái)實(shí)現，比如說(shuō)css3特效或者js腳本。
說(shuō)了這么多，怎么樣的一個(gè)布局或者說(shuō)HTML結構才是簡(jiǎn)單干凈的呢？這里教大家一個(gè)快速測試的方法：
你首先禁掉你頁(yè)面中所有的樣式（以及與樣式相關(guān)的信息），在IE中打開(kāi)，如果你的內容排列有序，方便閱讀，那么你的這個(gè)結構不會(huì )差到哪里去。
聯(lián)系客服
