css - 媒体查询构建最佳实践

Question

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

@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)。