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

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

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

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

一、保持一個(gè)簡(jiǎn)單的布布局

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

Responsive布局技巧

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

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

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

3.盡量少用js或flash

4.丟去沒用的絕對(duì)定位和浮動(dòng)樣式

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

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

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

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

3.一個(gè)簡(jiǎn)單的有語義的核心布局

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

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

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

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

擴(kuò)展閱讀：

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

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

/*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*/ 
} 

上面只是一種簡(jiǎn)單的使用方法，其實(shí)Medial Queries很簡(jiǎn)單，你可以為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 */ 
 
} 

更詳細(xì)的Medial Queries模板介紹，可以點(diǎn)擊這里閱讀。

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

擴(kuò)展閱讀：

1. Responsive設(shè)計(jì)和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#

三、定義斷點(diǎn)

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

主要的有：

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

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

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

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

1. 滿足主要的斷點(diǎn)；
2. 有可能的話添加一些別的斷點(diǎn)；
3. 設(shè)置高于1024px的桌面斷點(diǎn)

如下圖所示：

擴(kuò)展閱讀

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#

四、讓你的布局更靈活

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

來看一個(gè)簡(jiǎn)單的對(duì)比圖

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

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

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

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

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

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

這樣一來造成web頁面總布局的寬度大于100%；從而撐破了web的布局，為了讓這個(gè)div不在改變box module的寬度，也就是說，不管他的padding和border設(shè)置的是何值，而其width永遠(yuǎn)不變，還是“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;  
}  

擴(kuò)展閱讀：

1. 30+ CSS Grid System
2. 8個(gè)實(shí)用的響應(yīng)式設(shè)計(jì)框架
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)

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

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

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

img {  
  max-width: 100%;  
}  

斷點(diǎn)圖片

為每一個(gè)斷點(diǎn)提供不同的的圖片，這是一個(gè)比較頭痛的事情，因?yàn)镸edial Queries并不能改變圖片"src"的屬性值，那有沒有辦法可以解決呢？可以參考一下下面的解決方法：

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

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

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

對(duì)應(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);  
  }  
} 

擴(kuò)展閱讀：

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中有兩個(gè)關(guān)鍵詞也是非常的重要，“min-width”和“max-width”。這兩個(gè)屬性值能幫助你定義responsive臨界點(diǎn)的一個(gè)相對(duì)值。典型的好處：

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

一起來看幾個(gè)簡(jiǎn)單的運(yùn)用：

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

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

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

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

七、讓大部分東西是相對(duì)的

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

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

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

#p#

八、移動(dòng)端上的效果

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

PC桌面上的layout

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

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

是不是我們需要在移動(dòng)手機(jī)樣式中為每一個(gè)不重要的元素添加移去的樣式呢？其實(shí)不用，我們只需要在不重要的元素中添加類名“not_mobile”，然后在手機(jī)樣式中添加：

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

十、檢查你的viewport

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

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

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

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

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

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