在不更改HTML的情况下,为移动和桌面视图重新安排d性项目

概述我正在为我的网页使用Angular Material.我必须以不同的方式为桌面和移动显示相同的布局.以下是布局和相应的代码： 移动布局 移动代码 <div layout="column" style="text-align: center;"> <div flex-order="0"> <div class="child-1">Child 1</div> </div 我正在为我的网页使用Angular Material.我必须以不同的方式为桌面和移动显示相同的布局.以下是布局和相应的代码：

移动布局

移动代码

<div layout="column" >    <div flex-order="0">        <div >Child 1</div>    </div>    <div flex-order="1">        <div >Child 2</div>    </div>    <div flex-order="2">        <div >Child 3</div>    </div></div>

桌面布局

桌面代码

<div layout="row" >    <div flex-order="0">        <div >Child 2</div>    </div>    <div flex>        <div layout="column">            <div flex-order="0">                <div >Child 1</div>            </div>            <div flex-order="1">                <div >Child 3</div>            </div>        </div>    </div></div>

CSS代码

.child-1,.child-2,.child-3 {    border: 1px solID black;     background-color: gray;     margin-bottom: 10px;}.child-1,.child-3 {    height: 20px;}.child-2 {    height: 40px;}

有一个明显的HTML代码重复,以显示不同的布局.有没有办法在不重复代码的情况下显示这两种布局？

解决方法 试试这个

<div layout-sm="column" layout-gt-sm="row">      <div hIDe-sm hIDe-xs  layout-margin> Child 2</div>      <div layout="column" layout-align="space-around">          <div   layout-margin> Child 1</div>          <div hIDe-gt-sm layout-margin > Child 2</div>          <div   layout-margin> Child 3</div>      </div>   </div>

Codepen here

总结

以上是内存溢出为你收集整理的在不更改HTML的情况下,为移动和桌面视图重新安排d性项目全部内容，希望文章能够帮你解决在不更改HTML的情况下,为移动和桌面视图重新安排d性项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。