Возникли трудности с созданием макета сетки с использованием vue-material framework

Я пытаюсь создать четырехстрочный макет, в котором каждая строка содержит два столбца, используя структуру vue-material.

Макет должен быть адаптивным

Столбцы должны накладываться друг на друга, если размер области просмотра равен или меньше 600 пикселей.

Изображение в стопке

Столбцы должны иметь нормальный вид, например:

Изображение, когда оно не сложено.

Изображение не сложено

Это содержимое не складывается, когда я уменьшаю размер экрана.

Код с использованием материала vue

Это код | HTML

<div id="app">

  <div class="edit">

    <h1 class="md-display-3">Connect to be more</h1>
    <h2 class="md-subhead">Always be aware of the state of your business </h2>

  </div>

  <div id="canvas">

    <md-layout md-row md-columns id="rightColumn">

      <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>

        <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>


    </md-layout>

  </div>



</div>

Это код | CSS

.edit {
  text-align: center;
    font-family: Heiti SC;
}

    #entitle {

    line-height: 1.2em;
    }
.md-display-3 {

  font-family: Heiti SC;
}

/*  media queries  */


/*  tablet  */

@media screen and (max-width: 600px) {
  .md-column {
    float: none !important;
    margin: auto;
    text-align: center;
    width: 46%;
  }
}


#rightColumn {
  background-color: aqua;
  font-family: Heiti SC;
}

html css vue-material
person Waltham WECAN    schedule 22.07.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот как это сделать.

Vue.use(VueMaterial)

Vue.config.productionTip = false

new Vue({
  el: '#app',
})
@import url('https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.css');


#container > .md-layout {
  background-color: white;
  min-height: 100px;
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
}

body {
  background: #eee;
}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.js"></script>


<div id="app">
  <md-layout id="container">
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      1
    </md-layout>
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50">
      2
    </md-layout>
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50">
      3
    </md-layout>
    
    
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      4
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      5
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      6
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      7
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="66" md-flex-large="66" md-flex-xlarge="66">
      8
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
      9
    </md-layout>
    
  </md-layout>
</div>

person Ikbel    schedule 22.07.2017
comment
lkbel, не могли бы вы взглянуть на еще один вопрос о Vue Material? stackoverflow .com / questions / 59952741 / - person JS_is_awesome18; 28.01.2020