媒体查询而不是标准的CSS

时间:2017-10-08 13:02:10

标签: css responsive-design media-queries

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

1 个答案:

答案 0 :(得分:0)

你的问题不是很明确,但我相信你问为什么不在媒体查询中写下你所有的css,而不是一些“正常”的css然后媒体查询目标设备。

“普通”css是适用于所有视图端口范围(大小)的默认值。然后,媒体查询用于修改或覆盖各种宽度所需的任何默认值。

如果您不使用默认的css,那么您可能会在所有各种媒体查询中反复复制许多相同的css属性。这将使你的CSS变得臃肿,难以维护。通常,字体和背景颜色,字体系列等都在基本css中定义在一个地方。如果你在各种媒体查询中反复重复这些,除了造成大量不必要的冗余,如果你决定改变颜色或字体,你必须在很多地方而不是一个地方改变它。

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

此外,您不必先写入所有基本css(对于整个站点),然后再进行媒体查询。但是您应该首先为元素或元素集编写基本css,然后根据需要使用媒体查询对其进行修改。