參考：http://www.c945.com/article/677e0a007291ba63ace1675a.html
你去Google或者百度一下，你可以找到很多響應(yīng)式的CSS代碼，復(fù)雜的有，簡單的有，標(biāo)準(zhǔn)不一的也有，其實(shí)我也經(jīng)常去尋找資料學(xué)習(xí)，很是頭疼。但是最終你學(xué)到的知識(shí)，都要實(shí)踐到具體項(xiàng)目中，你才能知道什么最好用，什么最合適使用，我盡量本著下面的原則整理這些CSS代碼：
- 減輕前端開發(fā)負(fù)擔(dān)
- 能最大限度兼容各主流設(shè)備和PC電腦
- 代碼量盡量少，便于更清晰的思路
- 兼容全球主流框架Bootstrap
這是很漫長的工作，我積累了很久，實(shí)踐了很多，開發(fā)過的支持響應(yīng)式的框架或者插件，所以在這里我做一個(gè)分享，特別是CSS代碼段，相信對(duì)每一個(gè)前端開發(fā)者都會(huì)有所幫助，你不一定按照我的參考去做，但是你可以體會(huì)它們的意義。下面就看一看我常用的前端開發(fā)時(shí)用到的響應(yīng)式代碼：
a) 常用于圖片流
@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }
b) 常用于稍微復(fù)雜的基本響應(yīng)
@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }
c) 基于Bootstrap 3.x 全球主流框架
@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }
d) 基于Bootstrap 4.x 全球主流框架
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
e) 常用于Retina屏幕圖片適配(@2x)
@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... }