命名断点

我认为使用媒体查询而不针对特定设备是安全可靠的做法。特别要指出的是，不应该赞成专门针对 iPad 或黑莓手机设计媒体查询。媒体查询应该关注屏幕尺寸，直到当前设计遇到阻断而将所有工作过继给下一个媒体查询。 与之相同的观点是，断点不应该用设备来命名，而应使用更通用的方式。特别是，现在有一些手机比平板更大，而有一些平板比电脑更大…… ~~~ // Yep $breakpoints: ( 'medium': (min-width: 800px), 'large': (min-width: 1000px), 'huge': (min-width: 1200px), ); // Nope $breakpoints: ( 'tablet': (min-width: 800px), 'computer': (min-width: 1000px), 'tv': (min-width: 1200px), ); ~~~ 就此来说，任何不与特定设备关联而表达清晰的命名约定，都会因其广泛的通用性获得认可。 ~~~ $breakpoints: ( 'seed': (min-width: 800px), 'sprout': (min-width: 1000px), 'plant': (min-width: 1200px), ); ~~~ 上面的示例使用了嵌套的 map，但这并不是强制或绝对的，你完全可以使用字符串来代替（比如 `'(min-width: 800px)'`）。 ## 扩展阅读 * [Naming Media Queries](http://css-tricks.com/naming-media-queries/)