什麼是Responsive設計？製作Responsive設計

文章簡介：什麼是Responsive設計？有的同學認為Responsive設計是調適型配置，也有的同學認為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布局中，我們可以毫無保留的丟棄：

1. 盡量少用無關緊要的div
2. 不使用內嵌元素(inline)
3. 盡量少用js或flash
4. 丟去沒用的絕對位置和浮動樣式
5. 屏棄任何冗餘結構和不使用100%設定

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

1. 使用HTML5 Doctype和相關指南
2. 重設好你的樣式（reset.css）
3. 一個簡單的有語義的核心布局
4. 給重要的網頁元素使用簡單的技巧，比如導覽功能表之類元素

使用這些技巧，無非是為了保持你的HTML簡單乾淨，而且在你的頁面配置中的關鍵區段（元素）不要過分的依賴現代技巧來實現，比如說css3特效或者js指令碼。

說了這麼多，怎麼樣的一個布局或者說HTML結構才是簡單乾淨的呢？這裡教大家一個快速測試的方法：

你首先禁掉你頁面中所有的樣式（以及與樣式相關的資訊），在瀏覽器中開啟，如果你的內容排列有序，方便閱讀，那麼你的這個結構不會差到哪裡去。

擴充閱讀：

1. Responsive Layouts, Responsively Wireframed
2. Responsive Design 101
3. A Simple Device Diagram for Responsive Design Planning
4. Multi-Device Layout Patterns
5. Beginner’s Guide to Responsive Web Design
6. Create A Responsive, Mobile-First WordPress Theme
7. Initializr
8. 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 匯入法*/ <style>   @import url(tiny.css) (min-width:300px);   @import url(small.css) (min-width:600px);   @import ulr(big.css) (min-width:900px); </style> /*直接寫在樣式檔案中*/ @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) {     /* Small screen, retina, stuff to override above media query */  }  @media only screen and (min-width: 700px) {    /* Medium screen, non-retina */  }  @media only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px), only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px), only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px), only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px), only screen and (                min-resolution: 192dpi) and (min-width: 700px), only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {     /* Medium screen, retina, stuff to override above media query */  }  @media only screen and (min-width: 1300px) {    /* Large screen, non-retina */  }  @media only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px), only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px), only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px), only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px), only screen and (                min-resolution: 192dpi) and (min-width: 1300px), only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {     /* Large screen, retina, stuff to override above media query */  } 

更詳細的Medial Queries模板介紹，可以點擊這裡閱讀。

這個時候你可能並不關心裏面的樣式檔案怎麼寫，而更關心的是這樣的尺寸我要怎麼來定，如果你夠仔細的話，從上面例的模板代碼能找到一點的答案，那麼我這裡從別的地方截了和張圖，放在這裡以供大家參考：

擴充閱讀：

1. Responsive設計和CSS3 Media Queries的結合
2. CSS3 Media Queries
3. CSS3 Media Queries模板
4. 使用em單位建立CSS3的Media Queries
5. Responsive Web Design: Layouts and Media Queries
6. Create a Responsive Web Design with Media Queries
7. Responsive Web Design in Sass: Using Media Queries in Sass 3.2
8. The EMs have it: Proportional Media Queries FTW!
9. Media Queries In Responsive Web Design
10. A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
11. Responsive Design and Media Queries

三、定義斷點

定義斷點，那麼斷點是什嗎？簡單的描述就是，裝置寬度的臨界點，也就是前面大家比較關心的Medial Queries中的min-width和max-width值是什嗎？那麼在Responsive設計中，常見的斷點有六種，我們今後的Medial Queries條件判斷就可以根據這六個斷點來定。

主要的有：

1. 第一個斷點群體就是針對於智能手機設定，他的寬度是小於480px(
2. 第二個斷點是高智能行動裝置，比如說Ipads裝置，他的寬度是小於768px（
3. 第三個斷點就是針對於大裝置，比如說PC端，他的寬度是大於768px(>768px)

為了完美一些，我們還可以添加另外幾種斷點：

1. 添加一個小於320px的斷點，針對於小型的行動裝置；(
2. 還可以添加適用於平板裝置的斷點，大於768px小於1024px(>768px 和
3. 最後還可以為超寬的案頭設定一個斷點，大於1024px(>1024px)

綜合下來，設定斷點把握三個要點：

1. 滿足主要的斷點；
2. 有可能的話添加一些別的斷點；
3. 設定高於1024px的案頭斷點

如下圖所示：

擴充閱讀

1. Determining breakpoints for a responsive design
2. Device-Agnostic Approach To Responsive Web Design
3. Deciding what Responsive Breakpoints to use
4. Overview of Breakpoints in Responsive Web Design
5. Responsive Web Design Case Study: Zee
6. Looking Beyond Common Media Query Breakpoints
7. Re-thinking Breakpoints in Responsive Design
8. Where And How To Set Breakpoints In Media Queries
9. Using Breakpoint 1.0 in a Responsive Web Design Project
10. Responsive Breakpoints and Goldilocks

[1] [2]  下一頁