Question

我正在使用Pocketgrid来使网站响应。

pocketgrid的工作方式是，当我将浏览器的大小减小到移动设备的大小时，“三十块”类应该叠加在“七十块”类之上。但这不会发生。我哪里错了？

这就是我的HTML：

<div class="wrapper block-group">

  <div class="top-bar block">
    <p>Some text</p>
  </div>

  <div class="header block-group">
    <div class="focus-area block-group">
      <div class="logo thirty-block block">
        <p><span class="text-logo">LoremLOGO</span></p>
        <p><span class = "tagline">Lorem ipsum dolor sit amet</span></p>
      </div>    
      <div class="seventy-block block">
      <p>test</p>
      </div>
    </div> <!-End focus-area -->
  </div> <!-End header-->

</div> <!-End wrapper-->

这就是我的CSS：

/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
/* Border-box-sizing */
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix */
.block-group {
  *zoom: 1;
}
.block-group:before, .block-group:after {
  display: table;
  content: "";
  line-height: 0;
}
.block-group:after {
  clear: both;
}

.block-group {
  /* ul/li compatibility */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Nested grid */
.block-group > .block-group {
  clear: none;
  float: left;
  margin: 0 !important;
}

/* Default block */
.block {
  float: left;
  width: 100%;
}

.header{
  width: 100%;
}

.focus-area {
  width: 100%;
}

.thirty-block {
  width: 30%;
  background-color: green;
}
.seventy-block {
  width: 70%;
  height: 100px;
  background-color: blue;
}

Answer 1

您似乎已经对它进行了排序，但仅仅是为了进一步和将来帮助其他与此类或媒体查询存在类似问题的人，这是一个示例，显示类似的导航，移动媒体查询更改。

http://jsfiddle.net/vmggcv0g/

使用以下查询更改手机上的列表项状态（当屏幕小于480px时）：

@media only screen and (max-width : 480px)

与box-sizing属性一起允许在列表项上填充和边框（在此属性中，项目宽度将超过100％宽度，因为它将包含1px边框）：

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

这是一篇很棒的css-tricks文章，进一步解释了box-sizing属性和css框模型：

http://css-tricks.com/box-sizing/

Answer 2

我忽略了默认的PocketGrid规则，只考虑自定义代码：

以下规则无效，因为PocketGrid有Mobile First approach，因此这是默认行为。

.header{
  width: 100%;
}

.focus-area {
  width: 100%;
}

考虑到您只有30-70比例仅高于移动断点，您应该将它们包含在特定的媒体查询中，例如：

@media only screen and (min-width : 480px)
{
  .thirty-block {
     width: 30%;
     background-color: green;
  }
  .seventy-block {
     width: 70%;
     height: 100px;
     background-color: blue;
  }
}

在宽度低于480px的屏幕上，每个项目都堆叠在一起，在它上面，你将并排有30-70个字幕

CSS：div不堆叠

2 个答案: