小编Hit*_*mar的帖子

我正在尝试使用ruby on rails建立一个网站,它将在不同的屏幕尺寸上具有不同的样式.我正在使用materializecss这样做.

面临以下问题:

<div class="row">
  <div class="col m2 l3 blank"></div>
  <div class="col s12 m8 l6 yield">
    <%= yield %>
  </div>
  <div class="col m2 l3 blank"></div>
</div>

'div blank'用于'div yield'左右两侧的空白区域

我希望div.yield在大屏幕(笔记本电脑)上占50%的屏幕,中型屏幕(平板电脑)占66%,小屏幕占用100%的屏幕(手机)

当我在dekstop上的Chrome浏览器上测试时,我得到了理想的结果.在窗口调整大小时,'div yield'在宽度<600px时采用100%屏幕尺寸,在宽度> 992px时采用50%.

一切都很好,直到现在.

但是当我切换到铬的移动仿真模式时,'div yield'不接受宽度<600px的s12类,而是为宽度<600px服务m8类.

以下是两个结果的屏幕截图

左边一个是普通模式下的铬浏览器,宽度减少到357px.(这是我想要的结果

右边一个是移动仿真模式下的铬浏览器,宽度设置为357px.在这个m8类中,而不是类s12.(不想要)

截图

为什么会发生这种情况,以及如何解决这个问题？

我当前的 Excel 看起来像：

  ----------------
  |  Type |  Val |
  |--------------|
  |  A    |  1   |
  |--------------|     
  |  A    |  2   |     
  |--------------|
  |  B    |  3   |
  |--------------|     
  |  B    |  4   |     
  |--------------|     
  |  B    |  5   |
  |--------------|
  |  C    |  6   |

----------------

这是所需的Excel：

  ----------------------
  |  Type |  Val | Sum |
  |--------------------|
  |  A    |  1   | 3   |
  |       |------|     |
  |       |  2   |     |
  |--------------------|
  |  B    |  3   | 12  |
  | …