7 媒体查询

【强制】 Media Query 不得单独编排，必须与相关的规则一起定义；

不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

示例：

  1. /* Not so great */
  2. /* header styles */
  3. /* main styles */
  4. /* footer styles */
  6. @media (...) {
  7.     /* header styles */
  8.     /* main styles */
  9.     /* footer styles */
  10. }
  12. /* Better */
  13. /* header styles */
  14. @media (...) {
  15.     /* header styles */
  16. }
  18. /* main styles */
  19. @media (...) {
  20.     /* main styles */
  21. }
  23. /* footer styles */
  24. @media (...) {
  25.     /* footer styles */
  26. }