Responsive設計的十個基本技巧

　　Responsive Design對于我來說一點都不陌生，從他在這個互聯網出現的時候，就一直在觀注他的成長，而且在w3cplus站上也分享了很多這方面的教程和資源。由于組織了YY活動在線上和大家分享Responsive的設計，為了能讓大家更好的理解，我自己也有必要好好的做一下功課，今天這個就是功課，想和大家一起分享一下Responsive設計的一些基本技巧，和相對應的學習資源，希望對大家有所幫助。

　　什么是Responsive設計?有的同學認為Responsive設計是自適應布局，也有的同學認為Responsive是網格布局。其實這些想法都不正確。Wikipedia對Responsive做了詳細的描述，我在這里就簡單的說一下。Responsive設計簡單的稱為RWD，是精心提供各種設備都能閱讀網頁的一種設計方法，RWD能讓你的網頁在不同的設備中展現成不同的設計風格。從這一點描述來說，Responsve既不是流體布局，也不是什么網格布局，他是一種獨特的網頁設計方法。

　　Responsive設計無疑是網頁設計中的一個熱門話題。某種程度上，他將是一個最受歡迎的網頁設計概念，因為隨著網站用戶日漸多樣化的訪問方法，比如說“iPad”、“iPhone”、“Android移動設備”、“平板電腦”、“臺式機”以及“ 筆記本”等不同形式的顯屏出現。這樣我們以前那樣的網頁設計就無法在適合上述各種設備的瀏覽，這也給我們后續的網頁設計提出了一個全新的設計概念Responsive設計。讓我們的網頁能適應各種平臺、各種設備上渲染。

　　這個時候可能又有人會心生疑問，是不是Responsive是用來制作Mobile頁面的?這個問題我經常聽到有同學問?其實這是一個很簡單的問題，Mobile頁面和我們平時的頁面制作基本上是一樣的，只不過大小不一樣，其中稍有細節需要注意，從這一點出發，如果就Responsive設計是用來制作Mobile頁面并不妥，只能說Responsive設計能讓你的頁面在Mobile上顯示的更加完美。說到這，可能你會感覺到Responsive到底是什么?又怎么使用?我又要怎么學習呢?其實這些都不是問，接下來和大家分享一下學習或者說使用Responsive設計的一些基本技巧，以及對應的學習資源。

　　一、保持一個簡單的布布局

　　布局是一個在簡單不過的問題了，也是每個網頁設計中必須包含的部分，但我們使用Responsive設計第一步要做的事情就是讓你的頁面布局盡量的簡單。實現一個簡單的布局，我們有一些小技巧：

　　Responsive布局技巧

　　在Responsive布局中，我們可以毫無保留的丟棄：

　　盡量少用無關緊要的div

　　不使用內聯元素(inline)

　　盡量少用js或flash

　　丟去沒用的絕對定位和浮動樣式

　　屏棄任何冗余結構和不使用100%設置

　　有舍才有得，丟去了一些對Responsive有影響的東東，那么有哪些東東能幫助Responsive確定更好的布局呢?

　　使用HTML5 Doctype和相關指南

　　重置好你的樣式(reset.css)

　　一個簡單的有語義的核心布局

　　給重要的網頁元素使用簡單的技巧，比如導航菜單之類元素

　　使用這些技巧，無非是為了保持你的HTML簡單干凈，而且在你的頁面布局中的關鍵部分(元素)不要過分的依賴現代技巧來實現，比如說css3特效或者js腳本。

　　說了這么多，怎么樣的一個布局或者說HTML結構才是簡單干凈的呢?這里教大家一個快速測試的方法：

　　你首先禁掉你頁面中所有的樣式(以及與樣式相關的信息)，在瀏覽器中打開，如果你的內容排列有序，方便閱讀，那么你的這個結構不會差到哪里去。

　　擴展閱讀：

　　Responsive Layouts, Responsively Wireframed

　　Responsive Design 101

　　A Simple Device Diagram for Responsive Design Planning

　　Multi-Device Layout Patterns

　　Beginner’s Guide to Responsive Web Design

　　Create A Responsive, Mobile-First WordPress Theme

　　Initializr

　　5 Patterns To Rearrange Responsive Layouts

　　二、使用Medial Queries

　　Medial Queries在CSS3中得到很大的擴展，如果你不太了解Medial Queries是什么?建議你先狠狠點擊這里進行了解。而且Medial Queries在Responsive中扮演著一個非常重要的角色，可以說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說Medial Queries是一個媒體查詢，可以根據設置的尺寸，查詢出適配的樣式。我們回過頭來想，Responsive設計最關注的就是寬度：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。

　　那么Medial Queries要怎么使用呢?有幾種調用的方式，詳細的也可以閱讀這里.

　　/*import 導入法*/

　　/*直接寫在樣式文件中*/

　　@media screen and (max-width:300px) {

　　/*Tiny styles*/

　　}

　　@media screen and (max-width: 600px) {

　　/*small styles*/

　　}

　　@media screen and (max-width:900) {

　　/*big styles*/

　　}

　　上面只是一種簡單的使用方法，其實Medial Queries很簡單，你可以為Responsive制定一些常用的模板，例如：

　　@media only screen and (min-width: 320px) {

　　/* Small screen, non-retina */

　　}

　　@media

　　only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),

　　only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),

　　only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),

　　only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),

　　only screen and ( min-resolution: 192dpi) and (min-width: 320px),

　　only screen and ( min-resolution: 2dppx) and (min-width: 320px) {

原文轉自：http://www.kjueaiud.com