響應式設計的十個基本技巧
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結構才是簡單干凈的呢？這里教大家一個快速測試的方法：
你首先禁掉你頁面中所有的樣式（以及與樣式相關的信息），在瀏覽器中打開，如果你的內容排列有序，方便閱讀，那么你的這個結構不會差到哪里去。
擴展閱讀：
- Responsive Layouts, Responsively Wireframed
- Responsive Design 101
- A Simple Device Diagram for Responsive Design Planning
- Multi-Device Layout Patterns
- Beginner’s Guide to Responsive Web Design
- Create A Responsive, Mobile-First WordPress Theme
- Initializr
- 5 Patterns To Rearrange Responsive Layouts
#p#
二、使用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模板介紹，可以點擊這里閱讀。
這個時候你可能并不關心里面的樣式文件怎么寫，而更關心的是這樣的尺寸我要怎么來定，如果你夠仔細的話，從上面例的模板代碼能找到一點的答案，那么我這里從別的地方截了和張圖，放在這里以供大家參考：
擴展閱讀：
- Responsive設計和CSS3 Media Queries的結合
- CSS3 Media Queries
- CSS3 Media Queries模板
- 使用em單位創建CSS3的Media Queries
- Responsive Web Design: Layouts and Media Queries
- Create a Responsive Web Design with Media Queries
- Responsive Web Design in Sass: Using Media Queries in Sass 3.2
- The EMs have it: Proportional Media Queries FTW!
- Media Queries In Responsive Web Design
- A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
- Responsive Design and Media Queries
#p#
三、定義斷點
定義斷點，那么斷點是什么？簡單的描述就是，設備寬度的臨界點，也就是前面大家比較關心的Medial Queries中的min-width和max-width值是什么？那么在Responsive設計中，常見的斷點有六種，我們今后的Medial Queries條件判斷就可以根據這六個斷點來定。
主要的有：
- ***個斷點群體就是針對于智能手機設置，他的寬度是小于480px(
- 第二個斷點是高智能移動設備，比如說Ipads設備，他的寬度是小于768px（
- 第三個斷點就是針對于大設備，比如說PC端，他的寬度是大于768px(>768px)
為了***一些，我們還可以添加另外幾種斷點：
- 添加一個小于320px的斷點，針對于小型的移動設備；(
- 還可以添加適用于平板設備的斷點，大于768px小于1024px(>768px 和
- ***還可以為超寬的桌面設置一個斷點，大于1024px(>1024px)
綜合下來，設置斷點把握三個要點：
- 滿足主要的斷點；
- 有可能的話添加一些別的斷點；
- 設置高于1024px的桌面斷點
如下圖所示：
擴展閱讀
- Determining breakpoints for a responsive design
- Device-Agnostic Approach To Responsive Web Design
- Deciding what Responsive Breakpoints to use
- Overview of Breakpoints in Responsive Web Design
- Responsive Web Design Case Study: Zee
- Looking Beyond Common Media Query Breakpoints
- Re-thinking Breakpoints in Responsive Design
- Where And How To Set Breakpoints In Media Queries
- Using Breakpoint 1.0 in a Responsive Web Design Project
- Responsive Breakpoints and Goldilocks
#p#
四、讓你的布局更靈活
斷點確認了，接下來要讓你的布局更具靈活性。這里推薦使用flexible grids來布局，相對于固定寬度布局而言，Flexible grids能讓你的布局更適應于viewport的尺寸大小。而整個flexible grids中流體布局（也就是大家常說的自適應布局、液體布局、百分比布局）最適合各種類弄屏幕大小，結合正確的medial Queries，你可以制作出適應于任何可能出現的設備頁面布局。
來看一個簡單的對比圖
使用流體布局，有一個小技巧注意，為了讓瀏覽器計算小數點的四舍五入的問題，影響頁面布局，所以你的百分比小數位盡量多取一些位數，（如果你有看 bootstrap的源碼，你就能很明顯的看到他的百分比布局，小數點后面精確到十多位）。當然大家對這個數值不好把握的話，可以使用現成的網格系統，
- 30+ CSS Grid System(這里搜集了近40個不同網格系統的介紹)
- 8個實用的響應式設計框架（這里搜集了15個具有responsive設計的網格框架系統）
流體布局是方便，但是苦于的是，如果在設置了流體寬度值的元素上添加padding和border，那就兇險了，這個你懂的（css box module）有介紹：
那有沒有可解決的方法？方法是有的，早期是在設置寬度的元素內嵌套一個div，并將padding和border設置在這個內嵌元素上，這樣就多增加了一個額外標簽，其實在CSS3中有一個更好的方法，就是使用box-sizing來改變box module的默認模型。
舉個例子，我們有一個“div”元素：他的寬度是67%，而且需要設置一個15px的內距padding和3px的邊框border。Box module此時默認的寬度是：
- div寬度=67% + 2*15px + 2*3px
這樣一來造成web頁面總布局的寬度大于100%；從而撐破了web的布局，為了讓這個div不在改變box module的寬度，也就是說，不管他的padding和border設置的是何值，而其width永遠不變，還是“67%”，那么我們就需要使用 box-sizing來改變，這樣一來，我們可以在樣式表中這樣設置：
- *{
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -o-box-sizing: border-box;
- -ms-box-sizing: border-box;
- box-sizing: border-box;
- }
擴展閱讀：
- 30+ CSS Grid System
- 8個實用的響應式設計框架
- Mobile Responsive Design: The Flexible Grid
- Flexibility: A Foundation for Responsive Design
- Going From Adaptive To Fully Responsive
- Responsive Web Design
- Gridpak: The Responsive Grid Generator
- Five steps to gettin’ flexy in responsive web design
#p#
五、圖片的自適應
布局實現自適應不難，那么圖片怎么做到呢？也就是說我的一張圖片，有什么方法可以讓他在不同的設備上顯示能根據屏幕大小自適應，處理這種效果有一個方法，如果你的web頁面不會受到帶寬寬的影響（不考慮性能），你可以先制作一圖片讓其適合***屏幕，然后通過樣式來控制不同設備下顯示的大小；另外一種辦法就是你可以為每個斷點準備不同的圖片。
圖片自適應大小
使用樣式來控制圖片的自適應：
- img {
- max-width: 100%;
- }
斷點圖片
為每一個斷點提供不同的的圖片，這是一個比較頭痛的事情，因為Medial Queries并不能改變圖片"src"的屬性值，那有沒有辦法可以解決呢？可以參考一下下面的解決方法：
- 使用background-image:給元素使用背景圖片，
- 顯示/隱藏父元素：給父元素使用不同的圖片，然后通過Medial Queries來控制這些圖片顯示或隱藏。
一起來看一個斷點解決圖片自適應的例子：
- <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);
- }
- }
擴展閱讀：
- Adaptive images: solving the responsive image problem
- Responsive Images Without JavaScript
- How to style flexible images for RWD
- Adaptive Images for Responsive Designs
- Rundown of Handling Flexible Media
- On Responsive Images
- Responsive images: what's the problem, and how do we fix it?
- Responsive Images: How they Almost Worked and What We Need
- Responsive images without Javascript
- Responsive Image Techniques & Resources
六、別忘了min和max
在Responsive中有兩個關鍵詞也是非常的重要，“min-width”和“max-width”。這兩個屬性值能幫助你定義responsive臨界點的一個相對值。典型的好處：
- 防止你的布局變大或變小
- 結合液體布局，max-width和min-width在medial queries臨界點（斷點）能做到更好的適應性。
一起來看幾個簡單的運用：
液體布局中，如果你的寬度不小于768px，同時不大于1024px，那么我們就可以使用：
- min-width: 768px;
- max-width: 1024px;
比如“#main”元元素寬度不低于1000px的桌面上顯示，那么我們就可以這樣使用：
- @media screen and (min-width: 1024px) {
- #main {min-width: 1000px;}
- }
七、讓大部分東西是相對的
讓你整個Web元素都是相對的而不是絕對的，從這一個概念出發，我們可以給最外面的元素定義一個單位，然后其子元素和后代碼元素都繼承他。目前使用相對的單位有兩種常見的：
- 百分比（%）方法：給主容器定認一個固定尺寸或者流體尺寸，然后給其每個子元素使用百分比（%）來計算各自的參數，比如說width/padding/margin等；
- “em”單位：先在一個主容器中或者"<body>"中定義一個字體大小（font-size），把它做為基本單位，然后其他元素以此做為基準來計算出相關的值
“em”和“px”之間的轉換是有些技巧的，如果你從來沒有了解過他們之間的關系，我建議你先閱讀一下這篇文章《CSS中強大的EM》，簡單一點的，可以看看下圖：
#p#
八、移動端上的效果
在移動端設備，特別是小屏的移動手機上，所有的內容都將在一個列中顯示，這個時候，我們就需要對樣式進行一定的處理，首先來看一個布局的對比：
PC桌面上的layout
這樣的布局，在我們手機上將顯示成這樣：
那我們要怎么來實現這兩種布局的轉變呢？實現方法很簡單：只需要在你的mobile樣式表中覆蓋每一個元素的寬度，將原來的寬度轉換成“100%”
是不是我們需要在移動手機樣式中為每一個不重要的元素添加移去的樣式呢？其實不用，我們只需要在不重要的元素中添加類名“not_mobile”，然后在手機樣式中添加：
- @media screen and (max-width:300px) {
- .not_mobile{display: none;}
- }
十、檢查你的viewport
玩過移動端的同學可能都知道，許多移動端的瀏覽器模擬了桌面PC機下瀏覽器，你的web頁面在移動端的瀏覽器瀏覽時，整個頁面會直接壓縮顯示在一個屏幕下。這可是一個強大的功能，但也是Responsive致命的一功能。
看一個我在網上截圖來的對比圖：
針對這種情況，我可以使用“meta”屬性來讓其顯示正常：
- < meta name="viewport" content="width=device-width">
那么到這給與大家分享了制作Responsive設計的十個基本技巧，如果你對Responsive設計感興趣的話，你可以打開“Mediaqueri.es”查看一些優秀的案例。***希望這篇文章能給你帶來些許的幫助。如果你有更好的分享，我們可以一起探討。
原文鏈接：http://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html
