0

当屏幕小于768px时如何保证。文本和图像将相互堆叠。

具有包含内容和图像的 md-column 属性的 md-layout 是在屏幕缩小到平板电脑、移动设备和必要时超小屏幕时扩展整个页面。

<md-layout md-row md-sm-columns>

    <md-layout md-column="5"> <p class = "md-display-1"> Connect Soft documents </p>

  <p class = "">Allow documents that feed into each other to provide a consistent, untainted view of what your institution is doing.</p>

  </md-layout>


  <md-layout md-column="7">0</md-layout>



</md-layout>


<md-layout md-row md-sm-columns>

  <md-layout md-column = "7">

  <md-image md-src = "../assets/Statistics.png">

  </md-image>

  </md-layout>


  <md-layout md-column = "3"> <p class = "md-display-1"> Improve decision models</p>

  <p class = "">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


  </md-layout>



</md-layout>


<md-layout md-row md-sm-columns>

    <md-layout md-column="5"> <p class = "md-display-1">Search. Get what is important to You! </p>

  <p class = "">All notifications and documents are indexed and archived so that you can find what is needed at all times.</p>

  </md-layout>


  <md-layout md-column="7">0</md-layout>



</md-layout>

<md-layout md-row md-sm-columns>

  <md-layout md-column="5">


  </md-layout>


    <md-layout md-column="7"> <p class = "md-display-1"> Collaborate with other apps! </p>

  <p> Connect to the tools you need to prevent wasting time using so many apps </p>

  </md-layout>



</md-layout>
4

1 回答 1

1

我建议你花一个小时玩一下http://vuematerial.io/#/ui-elements/layout。在那里你会找到基本的使用信息，但我认为必须使用它才能真正理解它。

如果这是您想要的，我创建了一个简单的（可能的）解决方案；

<md-layout md-row md-sm-columns>

<md-layout md-column="7" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">

  <md-image md-src="http://via.placeholder.com/800x600">

  </md-image>

</md-layout>


<md-layout md-column="3">
  <p class="md-display-1"> Improve decision models</p>

  <p class="">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


</md-layout>

所以 - 使用md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33"属性是一种方法。Codepen 在这里：https ://codepen.io/anon/pen/jwRoYZ

但一如既往 - 您也可以分配自己的类并直接通过 CSS 定位它（在 Flex 和媒体查询的帮助下）；

 <md-layout md-row md-sm-columns>

<md-layout md-column="7" class="my-custom-class">

  <md-image md-src="http://via.placeholder.com/800x600">

  </md-image>

</md-layout>


<md-layout md-column="3">
  <p class="md-display-1"> Improve decision models</p>

  <p class="">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


</md-layout>

以及一些特殊的 CSS 媒体查询；

@media (max-width: 600px) {
  .my-custom-class {
    min-width: 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }
}

Codepen 在这里：https ://codepen.io/anon/pen/BZEeGw

关键字（使用）：CSS 媒体查询、Flex、VueMaterial

于 2017-07-17T14:04:49.440 回答