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

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

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

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

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

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

Responsive布局技巧

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

1.盡量少用無關(guān)緊要的div

2.不使用內(nèi)聯(lián)元素(inline)

3.盡量少用js或flash

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

5.屏棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置

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

1.使用HTML5 Doctype和相關(guān)指南

2.重置好你的樣式（reset.css）

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

4.給重要的網(wǎng)頁元素使用簡單的技巧，比如導(dǎo)航菜單之類元素

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

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

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

擴展閱讀：

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

#p#

二、使用Medial Queries

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

那么Medial Queries要怎么使用呢？有幾種調(diào)用的方式，詳細的也可以閱讀這里.

/*import 導(dǎo)入法*/ 
<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模板介紹，可以點擊這里閱讀。

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

擴展閱讀：

1. Responsive設(shè)計和CSS3 Media Queries的結(jié)合
2. CSS3 Media Queries
3. CSS3 Media Queries模板
4. 使用em單位創(chuàng)建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

#p#

三、定義斷點

定義斷點，那么斷點是什么？簡單的描述就是，設(shè)備寬度的臨界點，也就是前面大家比較關(guān)心的Medial Queries中的min-width和max-width值是什么？那么在Responsive設(shè)計中，常見的斷點有六種，我們今后的Medial Queries條件判斷就可以根據(jù)這六個斷點來定。

主要的有：

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

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

1. 添加一個小于320px的斷點，針對于小型的移動設(shè)備；(
2. 還可以添加適用于平板設(shè)備的斷點，大于768px小于1024px(>768px 和
3. ***還可以為超寬的桌面設(shè)置一個斷點，大于1024px(>1024px)

綜合下來，設(shè)置斷點把握三個要點：

1. 滿足主要的斷點；
2. 有可能的話添加一些別的斷點；
3. 設(shè)置高于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

#p#

四、讓你的布局更靈活

斷點確認了，接下來要讓你的布局更具靈活性。這里推薦使用flexible grids來布局，相對于固定寬度布局而言，F(xiàn)lexible grids能讓你的布局更適應(yīng)于viewport的尺寸大小。而整個flexible grids中流體布局（也就是大家常說的自適應(yīng)布局、液體布局、百分比布局）最適合各種類弄屏幕大小，結(jié)合正確的medial Queries，你可以制作出適應(yīng)于任何可能出現(xiàn)的設(shè)備頁面布局。

來看一個簡單的對比圖

使用流體布局，有一個小技巧注意，為了讓瀏覽器計算小數(shù)點的四舍五入的問題，影響頁面布局，所以你的百分比小數(shù)位盡量多取一些位數(shù)，（如果你有看 bootstrap的源碼，你就能很明顯的看到他的百分比布局，小數(shù)點后面精確到十多位）。當(dāng)然大家對這個數(shù)值不好把握的話，可以使用現(xiàn)成的網(wǎng)格系統(tǒng)，

1. 30+ CSS Grid System(這里搜集了近40個不同網(wǎng)格系統(tǒng)的介紹)
2. 8個實用的響應(yīng)式設(shè)計框架（這里搜集了15個具有responsive設(shè)計的網(wǎng)格框架系統(tǒng)）

流體布局是方便，但是苦于的是，如果在設(shè)置了流體寬度值的元素上添加padding和border，那就兇險了，這個你懂的（css box module）有介紹：

那有沒有可解決的方法？方法是有的，早期是在設(shè)置寬度的元素內(nèi)嵌套一個div，并將padding和border設(shè)置在這個內(nèi)嵌元素上，這樣就多增加了一個額外標(biāo)簽，其實在CSS3中有一個更好的方法，就是使用box-sizing來改變box module的默認模型。

舉個例子，我們有一個“div”元素：他的寬度是67%，而且需要設(shè)置一個15px的內(nèi)距padding和3px的邊框border。Box module此時默認的寬度是：

div寬度=67% + 2*15px + 2*3px 

這樣一來造成web頁面總布局的寬度大于100%；從而撐破了web的布局，為了讓這個div不在改變box module的寬度，也就是說，不管他的padding和border設(shè)置的是何值，而其width永遠不變，還是“67%”，那么我們就需要使用 box-sizing來改變，這樣一來，我們可以在樣式表中這樣設(shè)置：

*{  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  -o-box-sizing: border-box;  
  -ms-box-sizing: border-box;  
  box-sizing: border-box;  
}  

擴展閱讀：

1. 30+ CSS Grid System
2. 8個實用的響應(yīng)式設(shè)計框架
3. Mobile Responsive Design: The Flexible Grid
4. Flexibility: A Foundation for Responsive Design
5. Going From Adaptive To Fully Responsive
6. Responsive Web Design
7. Gridpak: The Responsive Grid Generator
8. Five steps to gettin’ flexy in responsive web design

#p#

五、圖片的自適應(yīng)

布局實現(xiàn)自適應(yīng)不難，那么圖片怎么做到呢？也就是說我的一張圖片，有什么方法可以讓他在不同的設(shè)備上顯示能根據(jù)屏幕大小自適應(yīng)，處理這種效果有一個方法，如果你的web頁面不會受到帶寬寬的影響（不考慮性能），你可以先制作一圖片讓其適合***屏幕，然后通過樣式來控制不同設(shè)備下顯示的大小；另外一種辦法就是你可以為每個斷點準(zhǔn)備不同的圖片。

圖片自適應(yīng)大小

使用樣式來控制圖片的自適應(yīng)：

img {  
  max-width: 100%;  
}  

斷點圖片

為每一個斷點提供不同的的圖片，這是一個比較頭痛的事情，因為Medial Queries并不能改變圖片"src"的屬性值，那有沒有辦法可以解決呢？可以參考一下下面的解決方法：

1. 使用background-image:給元素使用背景圖片，
2. 顯示/隱藏父元素：給父元素使用不同的圖片，然后通過Medial Queries來控制這些圖片顯示或隱藏。

一起來看一個斷點解決圖片自適應(yīng)的例子：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">  

對應(yīng)的CSS代碼

@media (min-device-width:600px) {  
  img[data-src-600px] {  
    content: attr(data-src-600px, url);  
  }  
}  
 
@media (min-device-width:800px) {  
  img[data-src-800px] {  
    content: attr(data-src-800px, url);  
  }  
} 

擴展閱讀：

1. Adaptive images: solving the responsive image problem
2. Responsive Images Without JavaScript
3. How to style flexible images for RWD
4. Adaptive Images for Responsive Designs
5. Rundown of Handling Flexible Media
6. On Responsive Images
7. Responsive images: what's the problem, and how do we fix it?
8. Responsive Images: How they Almost Worked and What We Need
9. Responsive images without Javascript
10. Responsive Image Techniques & Resources

六、別忘了min和max

在Responsive中有兩個關(guān)鍵詞也是非常的重要，“min-width”和“max-width”。這兩個屬性值能幫助你定義responsive臨界點的一個相對值。典型的好處：

1. 防止你的布局變大或變小
2. 結(jié)合液體布局，max-width和min-width在medial queries臨界點（斷點）能做到更好的適應(yīng)性。

一起來看幾個簡單的運用：

液體布局中，如果你的寬度不小于768px，同時不大于1024px，那么我們就可以使用：

min-width: 768px;  
max-width: 1024px; 

比如“#main”元元素寬度不低于1000px的桌面上顯示，那么我們就可以這樣使用：

@media screen and (min-width: 1024px) {  
    #main {min-width: 1000px;}  
} 

七、讓大部分東西是相對的

讓你整個Web元素都是相對的而不是絕對的，從這一個概念出發(fā)，我們可以給最外面的元素定義一個單位，然后其子元素和后代碼元素都繼承他。目前使用相對的單位有兩種常見的：

1. 百分比（%）方法：給主容器定認一個固定尺寸或者流體尺寸，然后給其每個子元素使用百分比（%）來計算各自的參數(shù)，比如說width/padding/margin等；
2. “em”單位：先在一個主容器中或者"<body>"中定義一個字體大小（font-size），把它做為基本單位，然后其他元素以此做為基準(zhǔn)來計算出相關(guān)的值

“em”和“px”之間的轉(zhuǎn)換是有些技巧的，如果你從來沒有了解過他們之間的關(guān)系，我建議你先閱讀一下這篇文章《CSS中強大的EM》，簡單一點的，可以看看下圖：

#p#

八、移動端上的效果

在移動端設(shè)備，特別是小屏的移動手機上，所有的內(nèi)容都將在一個列中顯示，這個時候，我們就需要對樣式進行一定的處理，首先來看一個布局的對比：

PC桌面上的layout

這樣的布局，在我們手機上將顯示成這樣：

那我們要怎么來實現(xiàn)這兩種布局的轉(zhuǎn)變呢？實現(xiàn)方法很簡單：只需要在你的mobile樣式表中覆蓋每一個元素的寬度，將原來的寬度轉(zhuǎn)換成“100%”

是不是我們需要在移動手機樣式中為每一個不重要的元素添加移去的樣式呢？其實不用，我們只需要在不重要的元素中添加類名“not_mobile”，然后在手機樣式中添加：

@media screen and (max-width:300px) {  
 .not_mobile{display: none;}  
} 

十、檢查你的viewport

玩過移動端的同學(xué)可能都知道，許多移動端的瀏覽器模擬了桌面PC機下瀏覽器，你的web頁面在移動端的瀏覽器瀏覽時，整個頁面會直接壓縮顯示在一個屏幕下。這可是一個強大的功能，但也是Responsive致命的一功能。

看一個我在網(wǎng)上截圖來的對比圖：

針對這種情況，我可以使用“meta”屬性來讓其顯示正常：

< meta name="viewport" content="width=device-width"> 

那么到這給與大家分享了制作Responsive設(shè)計的十個基本技巧，如果你對Responsive設(shè)計感興趣的話，你可以打開“Mediaqueri.es”查看一些優(yōu)秀的案例。***希望這篇文章能給你帶來些許的幫助。如果你有更好的分享，我們可以一起探討。

原文鏈接：http://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html