我认为使用媒体查询而不针对特定设备是安全可靠的做法。特别要指出的是,不应该赞成专门针对 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/)
- 关于作者
- 贡献
- 关于Sass
- Ruby Sass Or LibSass
- Sass Or SCSS
- 其他预编译器
- 简介
- 为什么需要一个样式指南
- 免责声明
- 核心原则
- 语法格式
- 字符串
- 数字
- 颜色
- 列表
- Maps
- CSS规则集
- 声明顺序
- 选择器嵌套
- 命名约定
- 常量
- 命名空间
- 注释
- 标示注释
- 文档
- 结构
- 组件
- 7-1模式
- Shame文件
- 响应式设计和断点
- 命名断点
- 断点管理器
- 媒体查询用法
- 变量
- 作用域
- !default标识符
- !global标识符
- 多变量或maps
- 扩展
- 混合宏
- 基础
- 参数列表
- 混合宏和浏览器前缀
- 条件语句
- 循环
- Each
- For
- While
- 警告和错误
- 警告
- 错误
- 工具
- Compass
- 栅格系统
- SCSS-Lint
- 总结概要