响应式设计尺寸参考

参考：http://www.c945.com/article/677e0a007291ba63ace1675a.html

你去Google或者百度一下，你可以找到很多响应式的CSS代码，复杂的有，简单的有，标准不一的也有，其实我也经常去寻找资料学习，很是头疼。但是最终你学到的知识，都要实践到具体项目中，你才能知道什么最好用，什么最合适使用，我尽量本着下面的原则整理这些CSS代码：

• 减轻前端开发负担
• 能最大限度兼容各主流设备和PC电脑
• 代码量尽量少，便于更清晰的思路
• 兼容全球主流框架Bootstrap

这是很漫长的工作，我积累了很久，实践了很多，开发过的支持响应式的框架或者插件，所以在这里我做一个分享，特别是CSS代码段，相信对每一个前端开发者都会有所帮助，你不一定按照我的参考去做，但是你可以体会它们的意义。下面就看一看我常用的前端开发时用到的响应式代码：

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) 常用于稍微复杂的基本响应
@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){ ... }