Question

背景：我正在尝试构建移动优先响应式网站。在这样做的过程中，我创建了自己的网格系统（3列布局）。

我使用min媒体查询来根据视口大小更改每列的大小。

问题：这是解决问题的最佳方法吗？即根据视口大小覆盖每列的％宽度？

我想知道这是否是＆＃39; Boostrap方法＆＃39;或者，如果有更简洁的方法来创建列宽/网格系统？

代码：网格中的每一列都分配了一个=以下类别之一。

.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}


/* 3 COLUMN */

.span_3_of_3 {
    width: 100%; 
}

.span_2_of_3 {
    width: 66.13%; 
}

.span_1_of_3 {
    width: 32.26%; 
}


@media screen and (min-width: 300px) {

.span_1_of_2, .span_1_of_3, .span_2_of_3, .span_3_of_3,  
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {
    width: 100%; 
}

.col 
{
    margin: 1.9% 0;

}
} /*/mediaquery*/ 



@media screen and (min-width: 580px) { 


.col {
    margin: 0% 0 9% 1%; /* Spaces Columns */
}   

.span_1_of_2 {
    width: 49.2%;
    position: relative;
}

.span_1_of_3 {
     width: 32.26%;    
}
} /*/mediaquery*

非常感谢，

Answer 1

您已经创建了一个网格，然后使用300px的最小宽度媒体查询覆盖它，这几乎是所有设备，因此您编写的第一组样式几乎总是会被忽略。

我从您的代码中获取它，您正在寻找以550px宽度启动的网格 - 虽然您需要添加浮动并稍微调整您的百分比，但这仍然有效。

我重新调整了你的代码：

<div class="col first span_1_of_3 blue">&nbsp;</div>
<div class="col span_1_of_3 red">&nbsp;</div>
<div class="col span_1_of_3 green">&nbsp;</div>

/* Temporary styles for the example */
.blue {
  background: blue;
  min-height: 120px;
}

.red {
  background: red;
  min-height: 120px;
}

.green {
  background: green;
  min-height: 120px;
}

/* The Grid */

/* Start at mobile and move up using min-width queries */
.span_1_of_2, .span_1_of_3, .span_2_of_3, .span_3_of_3,  
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {
  width: 100%;
}

/* First breakpoint is 580px */
@media screen and (min-width: 580px) {

.col {
  float: left;
  margin: 0 0 20px 1%; /* Spaces Columns */
}

.first {
  margin-left: 0;
}

/* Two columns */
.span_1_of_2 {
  width: 49%;
}

.span_2_of_2 {
  width: 100%;
}

/* Three columns */
.span_3_of_3 {
  width: 100%; 
}

.span_2_of_3 {
  width: 65.3%; 
}

.span_1_of_3 {
  width: 32.65%; 
}

} /* End media query */

旧代码的CodePen：http://codepen.io/simoncmason/pen/GgQPRa 这里新代码的CodePen：http://codepen.io/simoncmason/pen/yyvGyg

所有列都是100％宽，最大屏幕宽度为560px，然后媒体查询启动并将其分成指定宽度的列。

我添加了第一个类来删除第一列的左边距。

为了更加一致，我已将底部边距从百分比更改为px。

我稍微重新调整了列的宽度 - 尽管这些需要为生产站点进行精炼。

定制的响应式网格

1 个答案: