Question

我正在为我的网站创建一个响应式设计，我已经阅读了很多有关媒体查询和断点的内容。我知道没有设置断点，因为现在有很多屏幕，我们需要选择最适合我们布局的屏幕。 但是我不确定是否可以为每个单独设置的元素设置不同的断点，或者将所有css分组到我在整个网站中使用的公共断点更好。这是一个举例说明我的意思：

现在我做这样的事情：

方法1：

 .search_bar { 
    width: 30%;
    float: right;
 }
  /* Media Queries for Search Bar */
 @media only screen and (max-width: 900px) {
    .search_bar { 
        width: 40%;
    }
 }    
 @media only screen and (max-width: 780px) {
    .search_bar { 
        width: 50%;
    }   
 }
 @media only screen and (max-width: 500px) {
    .search_bar { 
        width: 100%;
    }   
 }

 .side_bar_wrap {
    width: 300px;
 }
 /* Media Queries for Side Bar */
@media only screen and (max-width: 850px) {
     .side_bar_wrap {
        width: 250px;
     }      
 }
 @media only screen and (max-width: 600px) {
     .side_bar_wrap {
        width: 150px;
     }  
 }
 @media only screen and (max-width: 400px) {
     .side_bar_wrap {
        display:none;
     }  
 }

 etc..etc..

如果您注意到上述情况，我的整个模板没有设定数量的断点。我根据各个元素在不同屏幕尺寸中的行为方式为每个元素定义了不同的断点。这为我提供了一种准确的方法来对齐单个元素，而不是定义公共断点中的所有元素。我不知道的是，如果推荐使用上述方法（或者可以使用），还是不应该这样做？我是否需要将上述内容更改为我为整个网站创建公共断点并将这些样式组合在一起形成这些常见断点之一？类似的东西：

方法2：

.search_bar { 
    width: 30%;
    float: right;
}
.side_bar_wrap {
    width: 300px;
}

/* Common Breakpoints to my entire site */
 /* Media Queries for all elements are grouped into one of these */
 @media only screen and (max-width: 900px) {
     .side_bar_wrap {
        width: 250px;
     }  
    .search_bar { 
        width: 40%;
    }        
 }
 @media only screen and (max-width: 750px) {
     .side_bar_wrap {
        width: 150px;
     }  
     .search_bar { 
        width: 50%;
    }
 }
 @media only screen and (max-width: 500px) {
     .side_bar_wrap {
        display:none;
     }  
     .search_bar { 
        width: 100%;
    }
 }

我的第一种方法是有效的做法还是我不应该这样做？如果我这样做是对还是错，有人可以告诉我吗？

Answer 1

您正在寻找最佳实践和解决方案，因为这些问题通常主要基于意见。不过，我会尝试给出一个客观的答案。

在我看来，最易维护的变体是采用方法2，即将媒体选择器保持在最低限度：

它可以轻松地将不同媒体设备的CSS拆分为单独的文件。
您可以更好地了解需要在不同布局中进行自定义的内容：不要将其分散，而是将其保存在一个位置。
它使CSS输出代码更小，意味着加载时间可以忽略不计。

缺点是您分散了语义耦合的定义，即在此示例中，#menu的规则散布在整个地方：

#menu { base rules ... }
other base selectors and rules ...

@media only screen and (max-width: 500px) { #menu { custom rules 1 } }
@media only screen and (max-width: 700px) { #menu { custom rules 2 } }

一个解决方案是放弃尝试定义基本规则并定义需要在媒体选择器中自定义的所有内容。这不是一个很好的方法，因为你很容易打破不要重复自己原则。另一种更好的方法是引入基本容器，例如具有常量基本规则的#menu-container，然后#menu“实现”，其具有仅在@media选择器中定义的规则。无论如何，重点不是将基本规则与特定于设备的规则混合在一起，因为它在读取和修改代码时会产生混淆。（例外情况是在所有设备上定义默认布局的规则;我会将这些规则保留在特定于设备的规则附近。）

在响应式设计中，我可以根据个别元素设置不同的断点吗？

1 个答案: