Responsive設計的十個基本技巧(3)

　　使用流體布局，有一個小技巧注意，為了讓瀏覽器計算小數點的四舍五入的問題，影響頁面布局，所以你的百分比小數位盡量多取一些位數，(如果你有看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

　　五、圖片的自適應

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

　　圖片自適應大小

　　使用樣式來控制圖片的自適應：

　　img {

　　max-width: 100%;

　　}

　　斷點圖片

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

　　使用background-image:給元素使用背景圖片，

　　顯示/隱藏父元素：給父元素使用不同的圖片，然后通過Medial Queries來控制這些圖片顯示或隱藏。

　　一起來看一個斷點解決圖片自適應的例子：

　　對應的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等;

原文轉自：http://www.kjueaiud.com