Question

我有一个Angular MD模板，它使用大屏幕上的行布局和移动设备上的列布局。但是，在手机上的大多数标准浏览器中，我都会得到一个奇怪的结果，即列太大了。我有不同的屏幕显示它应该是什么样的。

我的简化代码（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>

Answer 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。 *有关更多兼容性信息，请参阅链接。

*顺便说一句，你错过了一个＆＃39; =＆＃39;在第二个＆＃39; layout-align＆＃39;指令。

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

1 个答案: