移动浏览器列视图问题材料设计（css）答案

【问题标题】：Mobile browser column view issues material design (css)移动浏览器列视图问题材料设计（css）
【发布时间】：2015-07-09 19:13:36
【问题描述】：

我有一个 Angular MD 模板，它在大屏幕上使用行布局，在移动设备上使用列布局。但是，在手机上的大多数标准浏览器中，我会得到一个奇怪的结果，即列太大。我对它的外观有不同的屏幕截图。

PC view

Mobile view how it looks on Chrome/ff/Opera

Mobile standard browser view (problem)

我的简化代码（3行/列）如下

<div layout="row" layout-align="center center">
  <div flex="50" flex-sm="90" flex-md="80" class="row3" layout="row" layout-sm="column">
    <div flex="40" flex-sm="100" layout="row" layout-align "center start">
      <!-- first column -->
    </div>

    <div flex="20" flex-sm="100" style="background: #2AFF00">
      <!-- second column -->
    </div>

    <div flex="40" flex-sm="100" layout="row" layout-align="center start">
      <!-- Third column -->
    </div>
  </div>
</div>

【问题讨论】：

你能提供一个 JSFiddle 吗？
flexbox 不是supported everywhere yet
请说明您想要什么行为以及在哪些浏览器中不起作用。如果你也能提供一个 codepen 或 js fiddle 那就太好了。 Flexbox 应该可以在当今使用的所有浏览器中正常工作。

标签： css angularjs flexbox material-design

【解决方案1】：

我用 Chrome 制作了一个demo on codepen.io，但正如 BotanMan 所说，Safari 5.1.7 (windows) 似乎不支持该 flexbox，我什至无法使用 IE11 在 codepen 上对其进行测试。

<div layout-sm="column" layout="row" layout-align="center center" layout-padding>
  <div class="row3" layout="row" layout-sm="column">
    <div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin>
      <div class="img"></div>
      <h2>Enter the product's serial number</h2>
      <button class="md-button">Verify the product</button>
    </div>

    <div flex-sm="100" flex="20" layout-margin layout-padding style="background: #2AFF00">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum temporibus iure voluptas recusandae molestiae saepe doloremque velit, consequatur minus sint expedita laboriosam magni architecto omnis, reprehenderit labore maxime ea, fugiat officiis. Commodi, aliquam nisi consequatur!</p>
      <p>Enim aliquam nihil nam alias consequuntur amet fuga suscipit dolores deleniti ut, quo numquam quaerat harum cupiditate dolore veritatis a sit, nesciunt aut magni commodi sed doloremque quis. Voluptatum cupiditate commodi, magni consequatur, eveniet aut.</p>
      <p>Sit quae natus quibusdam nesciunt quo rem totam sequi dolorem sint eum perspiciatis molestias illum debitis, nobis eos dolorum. Sunt, perspiciatis voluptas possimus, laboriosam officiis recusandae animi in, nisi suscipit ipsum eaque assumenda odit laudantium!</p>
    </div>

    <div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin>
      <div class="img"></div>
      <h2>Click the button below to enable your webcam and start the scanning</h2>
      <button class="md-button">Scan W/ webcam</button>
    </div>
  </div>
</div>

根据caniuse.com，每个最新版本的浏览器都应该能够使用flexbox。 *有关更多兼容性信息，请参阅链接。

*顺便说一句，您在第二个“布局对齐”指令中缺少一个“=”。

【讨论】：