媒體查詢 - 通用響應模板

Question

我想創建通用響應模板， 哪些媒體查詢
我必須使用如果我想檢測所有設備的大小？

Answer 1

入住這Common CSS Media Queries Break Points

/*------------------------------------------ 
    Responsive Grid Media Queries - 1280, 1024, 768, 480 
    1280-1024 - desktop (default grid) 
    1024-768 - tablet landscape 
    768-480  - tablet 
    480-less - phone landscape & smaller 
--------------------------------------------*/ 
@media all and (min-width: 1024px) and (max-width: 1280px) { } 

@media all and (min-width: 768px) and (max-width: 1024px) { } 

@media all and (min-width: 480px) and (max-width: 768px) { } 

@media all and (max-width: 480px) { } 


/* Portrait */ 
@media screen and (orientation:portrait) { /* Portrait styles here */ } 
/* Landscape */ 
@media screen and (orientation:landscape) { /* Landscape styles here */ } 


/* CSS for iPhone, iPad, and Retina Displays */ 

/* Non-Retina */ 
@media screen and (-webkit-max-device-pixel-ratio: 1) { 
} 

/* Retina */ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5) { 
} 

/* iPhone Portrait */ 
@media screen and (max-device-width: 480px) and (orientation:portrait) { 
} 

/* iPhone Landscape */ 
@media screen and (max-device-width: 480px) and (orientation:landscape) { 
} 

/* iPad Portrait */ 
@media screen and (min-device-width: 481px) and (orientation:portrait) { 
} 

/* iPad Landscape */ 
@media screen and (min-device-width: 481px) and (orientation:landscape) { 
} 

Answer 2

檢查這些網站幫助你：

http://24ways.org/2011/conditional-loading-for-responsive-designs/

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

我強烈建議更換使用引導。更快的發展。另外文檔非常完整。 http://getbootstrap.com/getting-started/

至於你的問題，你有這樣的例子：

/*Anything outside of media queries is for MOBILE 
    This is Mobile first approach. 
*/ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... }