维护最新的响应式媒体查询资源？
网上有很多关于响应式设计的文章，以及如何使用css媒体查询来实现你的目标。然而，它们中的大多数似乎是在2011年编写的，当时响应式设计开始流行起来。
自2011年以来，许多不同的设备已经发布到市场上，有各种各样的设备宽度和各种ppi，2011年的媒体查询不一定会涵盖。我主要指的是像Galaxy Note I/II这样的大屏幕移动设备，以及7英寸的平板电脑，甚至像视网膜显示器这样的高ppi设备。
有没有什么资源可以维护最新的css媒体查询代码，以便以最佳实践的方式充分覆盖大多数设备？
回答 3
Stack Overflow用户
发布于 2012-09-21 04:38:13
响应式设计不仅仅是“媒体查询”，响应式设计鼓励开发人员和设计师以每一种可能的方式拥抱可访问性。
我强烈建议去twitter(因为所有好的对话都是在那里进行的)，马上注册一个账号，关注这些令人惊叹的人:在@beep之后没有特殊的顺序：
- @beep - Ethan Marcotte，那个普及响应式设计的人。
- @RWD - Ethan Marcotte的账户，他在tweets上发布与响应式网页设计相关的东西。
- @lukew - Luke Wroblewski
- @brad_frost - Brad Frost。
- @Trentwalton - Trent Walton。
- @adactio - Jeremy Keith。
- @scottjhel - Scott Jhel是Picturefill的创建者，他为响应式图像和其他一些很酷的东西填充了polyfill。
- @wilto - Mat Marquis。
- @smashingmag - Smashing杂志。
- @grigs - Jason Grigsby。
- @globalmoxie - Josh Clarke。
- @chriscoyier - Chris Coyier，一切CSS..
- @malarkey - Andy Clarke。
- @jordanmoore - Jordan Moore。
- @viljamis - Viljami Salminen。
我可能遗漏了一些人，但这是一个很好的起点！在一天中的任何时候，你一定会遇到一些与响应式设计相关的很好的对话、链接或文章。
此外，他们几乎每天都会在他们的网站上写关于响应式网页设计的文章，所以一定要检查他们。就在这里，你有很多可读的东西。
一些好的读物：
Conditionally Loading Content
Conditional Loading for Responsive Designs
Creating a Mobile-First Responsive Web Design
The EMs have it: Proportional Media Queries FTW! -推荐阅读。
This is Responsive -由布拉德·弗罗斯特策划，从网络上收集的关于响应式网页设计的链接和材料的汇总。
至于出版物的出版日期，它们是不相关的；如果内容过时或方法被贬低，作者很可能会删除它或相应地标记它。
编辑:还有一些测试网站的好工具：
Responsive.is -测试您的设计在不同屏幕尺寸上的表现。
responsivepx.com -通过在'px‘中输入屏幕宽度，可以准确地知道您的设计在哪里中断。
pxtoem -将像素单位转换为ems。
Izilla Media Query Debugger -这个插件显示浏览器窗口的大小(有点像responsivepx.com，但在本地工作)。
Opera Mobile Emulator -在Opera Mobile上测试你的网站。
Opera Mini Simulatr -在Opera Mini上测试你的网站(适用于低端设备)。
请记住，do not 为流行的屏幕尺寸设计！当您的设计中断时，插入断点(媒体查询)。相关：http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid
Stack Overflow用户
发布于 2012-09-21 02:14:37
据我所知，没有这样的媒体查询库，原因如下：
响应式设计的最佳实践方法是在设计需要时使用媒体查询。一个合适的响应式站点应该根据用户的屏幕大小调整大小，如果且仅当UX需要调整时，才应该使用媒体查询。
要找到设计的断点，请调整浏览器的大小，直到页面变得难以阅读、发生裁剪或出现其他UI/UX问题。注意屏幕尺寸，并对该断点进行必要的调整。
阅读：http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design
如果您不希望使用此方法，您可以将框架视为最佳实践的来源。我喜欢并经常使用的一个是Foundation，还有一些像Bootstrap http://twitter.github.com/bootstrap/
这些都是很好的工具，但是您最终会发现自己会后退，并发现更适合您的设计的断点。Foundation是启动项目的一个很好的起点。
进一步阅读：
- http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
- http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
- http://www.simple-talk.com/author/edward-charbeneau/
- http://www.lukew.com/ff/entry.asp?1562
- http://www.lukew.com/ff/entry.asp?1485
Stack Overflow用户
发布于 2012-09-21 04:34:46
来自twitter的Bootstrap可能是一个很好的起点。
http://twitter.github.com/bootstrap/
https://stackoverflow.com/questions/12514989
复制相似问题
腾讯云开发者
