媒体查询构建最佳实践

Question

向网站添加响应式媒体查询的最佳方法是什么？ ...以什么顺序和方法？ 有人说移动优先是一种方法，但我想知道以下内容是否更容易管理以平均屏幕尺寸为目标（填充所有页面元素，稍后一些将隐藏在小屏幕上，例如面包屑链接) 以便为页面定义“所有”css 样式、布局、排版等，以便每个元素都获得其默认样式。 然后其他查询将仅定义影响每个较小尺寸选项的更改。因此“all”块将是最大的，然后所有其他媒体查询将只是应用调整以覆盖默认样式。

@media all { /* including all styles for all elements */ }
@media (min-width: 1200px) { /* only add styles that differ from "all" and target this size changes */ }
@media (min-width: 992px) and (max-width: 1199px) { /* only add styles that differ from "all" and target this size changes */ }
@media (min-width: 768px) and (max-width: 991px) { /* only add styles that differ from "all" and target this size changes */ }
@media (max-width: 767px) { /* only add styles that differ from "all" and target this size changes */ }
@media (max-width: 480px) { /* only add styles that differ from "all" and target this size changes */ }

Answer 1

真正的响应式设计应该意味着您使用尽可能少的媒体查询。 我倾向于坚持我的主要 CSS，然后是平板电脑的媒体查询 (780px)，然后是智能手机的媒体查询 (375px)。