Media Query构建最佳实践

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）。