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)的信息），在瀏覽器中打開(kāi)，如果你的內容排列有序，方便閱讀，那么你的這個(gè)結構不會(huì )差到哪里去。

擴展閱讀：

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

那么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>/*直接寫(xiě)在樣式文件中*/@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 */}@mediaonly 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 */}@mediaonly 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 */}@mediaonly 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模板介紹，可以點(diǎn)擊這里閱讀。

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

擴展閱讀：

1. Responsive設計和CSS3 Media Queries的結合
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

三、定義斷點(diǎn)

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

主要的有：

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

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

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

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

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

如下圖所示：

擴展閱讀

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

四、讓你的布局更靈活

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

來(lái)看一個(gè)簡(jiǎn)單的對比圖

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

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

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

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

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

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

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

*{  -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個(gè)實(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

五、圖片的自適應

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

圖片自適應大小

使用樣式來(lái)控制圖片的自適應：

img {  max-width: 100%;}

斷點(diǎn)圖片

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

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

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

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

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

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

一起來(lái)看幾個(gè)簡(jiǎn)單的運用：

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

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

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

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

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

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

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

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

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

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

PC桌面上的layout

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

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

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

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

十、檢查你的viewport

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

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

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

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

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

特別聲明:本文中提供的鏈接都是可能打開(kāi)的，如果你碰到了打不開(kāi)的網(wǎng)站，請先開(kāi)啟你的VPN服務(wù)。

如需轉載，煩請注明出處：http://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html