?
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)頁(yè)的一種設(shè)計(jì)方法，RWD能讓你的網(wǎng)頁(yè) 在不同的設(shè)備中展現(xiàn)成不同的設(shè)計(jì)風(fēng)格。從這一點(diǎn)描述來說，Responsve既不是流體布局，也不是什么網(wǎng)格布局，他是一種獨(dú)特的網(wǎng)頁(yè)設(shè)計(jì)方法。
Responsive設(shè)計(jì)無疑是網(wǎng)頁(yè)設(shè)計(jì)中的一個(gè)熱門話題。某種程度上，他將是一個(gè)最受歡迎的網(wǎng)頁(yè)設(shè)計(jì)概念，因?yàn)殡S著網(wǎng)站用戶日漸多樣化的訪問方法，比如 說“iPad”、“iPhone”、“Android移動(dòng)設(shè)備”、“平板電腦”、“臺(tái)式機(jī)”以及“ 筆記本”等不同形式的顯屏出現(xiàn)。這樣我們以前那樣的網(wǎng)頁(yè)設(shè)計(jì)就無法在適合上述各種設(shè)備的瀏覽，這也給我們后續(xù)的網(wǎng)頁(yè)設(shè)計(jì)提出了一個(gè)全新的設(shè)計(jì)概念 Responsive設(shè)計(jì)。讓我們的網(wǎng)頁(yè)能適應(yīng)各種平臺(tái)、各種設(shè)備上渲染。
?
這個(gè)時(shí)候可能又有人會(huì)心生疑問，是不是Responsive是用來制作Mobile頁(yè)面的？這個(gè)問題我經(jīng)常聽到有同學(xué)問？其實(shí)這是一個(gè)很簡(jiǎn)單的問 題，Mobile頁(yè)面和我們平時(shí)的頁(yè)面制作基本上是一樣的，只不過大小不一樣，其中稍有細(xì)節(jié)需要注意，從這一點(diǎn)出發(fā)，如果就Responsive設(shè)計(jì)是用 來制作Mobile頁(yè)面并不妥，只能說Responsive設(shè)計(jì)能讓你的頁(yè)面在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)頁(yè)設(shè)計(jì)中必須包含的部分，但我們使用Responsive設(shè)計(jì)第一步要做的事情就是 讓你的頁(yè)面布局盡量的簡(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)頁(yè)元素使用簡(jiǎn)單的技巧，比如導(dǎo)航菜單之類元素
?
使用這些技巧，無非是為了 保持你的HTML簡(jiǎn)單干凈 ，而且在你的頁(yè)面布局中的關(guān)鍵部分（元素）不要過分的依賴現(xiàn)代技巧來實(shí)現(xiàn)，比如說css3特效或者js腳本。
?
說了這么多，怎么樣的一個(gè)布局或者說HTML結(jié)構(gòu)才是簡(jiǎn)單干凈的呢？這里教大家一個(gè)快速測(cè)試的方法：
你首先禁掉你頁(yè)面中所有的樣式（以及與樣式相關(guān)的信息），在 瀏覽器 中打開，如果你的內(nèi)容排列有序，方便閱讀，那么你的這個(gè)結(jié)構(gòu)不會(huì)差到哪里去。
?
擴(kuò)展閱讀：
1. Responsive Layouts, Responsively Wireframed
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. nitializr
8. 5 Patterns To Rearrange Responsive Layouts
?
二、使用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頁(yè)面將加載一個(gè)備用的樣式，實(shí)現(xiàn)特定的頁(yè)面風(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é)合
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)單的描述就是，設(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 Projec t
10. Responsive Breakpoints and Goldilocks
?
四、讓你的布局更靈活
斷點(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è)備頁(yè)面布局。
來看一個(gè)簡(jiǎn)單的對(duì)比圖
使用流體布局，有一個(gè)小技巧注意，為了讓瀏覽器計(jì)算小數(shù)點(diǎn)的四舍五入的問題，影響頁(yè)面布局，所以你的百分比小數(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頁(yè)面總布局的寬度大于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ò)展閱讀：
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
7. Gridpak: The Responsive Grid Generator
8. Five steps to gettin’ flexy in responsive web design
?
五、圖片的自適應(yīng)
布局實(shí)現(xiàn)自適應(yīng)不難，那么圖片怎么做到呢？也就是說我的一張圖片，有什么方法可以讓他在不同的設(shè)備上顯示能根據(jù)屏幕大小自適應(yīng)，處理這種效果有一個(gè) 方法，如果你的web頁(yè)面不會(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
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è)字體大小（font-size），把它做為基本單位，然后其他元素以此做為基準(zhǔn)來計(jì)算出相關(guān)的值
?
“em”和“px”之間的轉(zhuǎn)換是有些技巧的，如果你從來沒有了解過他們之間的關(guān)系，我建議你先閱讀一下這篇文章《 CSS中強(qiáng)大的EM 》，簡(jiǎn)單一點(diǎn)的，可以看看下圖：
?
八、移動(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頁(yè)面在移動(dòng)端的瀏覽器瀏覽時(shí)，整個(gè)頁(yè)面會(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)秀的案例。最后希望這篇文章能給你帶來些許的幫助。如果你有更好的分享，我們可以一起探討。
?
日志標(biāo)題:
《響應(yīng)式設(shè)計(jì)的十個(gè)基本技巧》
日志鏈接:
http://blog.ui90.com/ten-basic-skills-of-responsive-design.html
博客名稱:
胖子馬博客
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
