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

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

　　三、定義斷點

　　定義斷點，那么斷點是什么?簡單的描述就是，設備寬度的臨界點，也就是前面大家比較關心的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

　　四、讓你的布局更靈活

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

　　來看一個簡單的對比圖

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