文章/答案/技术大牛

发布

社区首页 >问答首页 >实现不在移动视图中工作的网格s12

问实现不在移动视图中工作的网格s12
EN

Stack Overflow用户

提问于 2017-03-19 20:07:42

回答 1查看 3.4K关注 0票数 2

我正在尝试建立一个使用红宝石的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空白”指的是“div left”左右侧的空白。

我希望div.yield在大屏幕(笔记本电脑)、中屏幕(平板电脑)和100%屏幕(移动电话)上占据50%的屏幕。

当我在dekstop上的铬浏览器上测试这个时，我得到了想要的结果。在窗口调整上，“div收益率”在width<600px上占100%屏幕大小，在width>992px上占50%。

到现在为止一切都很顺利。

但是，当我切换到铬的移动仿真模式时，'div产额‘并不是接受s12类的width<600px，而是为width<600px服务的m8类。

下面是这两个结果的截图。

左边是正常模式下的铬浏览器，其宽度减少到357 my。(这是我想要的结果。)

右边是移动模拟模式下的铬浏览器，宽度设置为357 to。在这个m8类中，提供的是类s12。(不希望)

屏幕截图

为什么会发生这种情况，以及如何解决？

materialize

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-20 19:57:57

我只是浏览了一下您的链接，问题是移动设备的实际屏幕宽度并不一定与布局视图的宽度相匹配。例如，对于一个IPhone，它对每个"css像素“使用2个屏幕像素，有效地使您的媒体查询”相信“屏幕宽为750像素(实际上，您只希望这些像素独立于设备)。这就是它不选择小网格大小的原因。您必须指示页面在与设备无关的像素中匹配屏幕宽度，而简单的方法是使用viewport元标记。因此，如果将以下内容添加到您的<head>中，则您的响应性设计将按预期工作：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

票数 13

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42891630

复制

相似问题

问实现不在移动视图中工作的网格s12
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现不在移动视图中工作的网格s12EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现不在移动视图中工作的网格s12
EN