媒体查询而不是标准 css答案

【问题标题】：Media query instead of standard css媒体查询而不是标准 css
【发布时间】：2017-10-08 21:24:58
【问题描述】：

我真的不知道怎么问这个问题。但是，如果我需要做响应式网站，为什么我应该编写 CSS，然后才编写媒体查询，如果我可以在媒体查询的适当范围内同时编写必要的样式，同时用 HTML 制作网站的基础？？？

【问题讨论】：

欢迎来到 SO，如果您不知道如何提出您需要阅读本文的问题 > stackoverflow.com/help/how-to-ask
解释更多，你想知道什么？你有什么问题？
是否可以在媒体查询中从一开始就编写所有的css样式？

【解决方案1】：

您的问题不是很清楚，但我相信您在问为什么不将所有的 CSS 都写在媒体查询中，而不是一些“正常”的 CSS，然后是针对设备的媒体查询。

“正常”css 是适用于所有视口范围的默认值，无论大小。然后使用媒体查询来修改或覆盖各种宽度所需的任何默认值。

如果您不使用默认 css，那么您可能会在所有各种媒体查询中一遍又一遍地复制许多相同的 css 属性。这将使您的 css 臃肿且难以维护。通常，字体和背景颜色、字体系列等都在基础 CSS 中定义在一个地方。如果您要在各种媒体查询中一遍又一遍地重复这些内容，除了会造成很多不必要的冗余之外，如果您决定更改颜色或字体，您将不得不在很多地方进行更改，而不仅仅是一个地方。

在设计“移动优先”时，通常您希望您的基本样式能够反映您希望网站在移动设备上的外观，然后添加媒体查询来更改较大设备的布局，从最小到最大。这并不是说您不使用媒体查询来定位最小的设备，但从基础 CSS 开始并以移动设备为目标被认为是最佳实践。

此外，您不必先编写所有基本 CSS（针对您的整个网站），然后再编写媒体查询。但是您应该首先为一个元素或一组元素编写基本 css，然后根据需要使用媒体查询对其进行修改。

【讨论】：