angular 响应式布局

引入 grid 栅格系统并注入

import { NzGridModule } from 'ng-zorro-antd/grid';

文档介绍：

[nzFlex] flex 布局属性   string | number -
[nzOffset]  栅格左侧的间隔格数，间隔内不可以有栅格  number  -
[nzOrder]   栅格顺序    number  -
[nzPull]    栅格向左移动格数    number  -
[nzPush]    栅格向右移动格数    number  -
[nzSpan]    栅格占位格数，为 0 时相当于 display: none    number  -
[nzXs]  <576px 响应式栅格，可为栅格数或一个包含其他属性的对象    number | object -
[nzSm]  ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象   number | object -
[nzMd]  ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象   number | object -
[nzLg]  ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象   number | object -
[nzXl]  ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象  number | object -
[nzXXl] ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象  number | object

下面是我写的一个Demo:
1

`.box{width: 1300px;height: 1000px;margin-top: 20px;margin:  10px auto;background-color: pink;
}
.left{float: left;width: 900px;height: 1000px;background-color: rgb(19, 106, 187);
}
.right{float: right;width: 500px;height: 1000px;background-color: rgb(141, 21, 41);
}
.left_f{width: 600px;height: 300px;background-color: rgb(64, 195, 247);
}
.left_f1{width: 600px;height: 300px;margin-top: 20px;background-color: rgb(16, 165, 158);
}
.left_f2{width: 600px;height: 400px;margin-top: 20px;background-color: rgb(241, 239, 103);
}
.left_f3{width: 600px;height: 400px;margin-top: 20px;background-color: rgb(42, 56, 184);
}.right_r{width: 500px;height: 400px;background-color: rgb(42, 56, 184);
}
.right_r1{width: 500px;height: 400px;margin-top: 20px;background-color: rgb(233, 75, 115);
}.right_r2{width: 400px;height: 400px;margin-top: 20px;background-color: rgb(167, 145, 51);
}.right_r3{width: 400px;height: 400px;margin-top: 20px;background-color: rgb(23, 93, 139);
}#right{float: left;width: 250px;height: 100px;background-color: rgb(160, 57, 57);
}
#right_1{float: right;width: 250px;height: 100px;background-color: rgb(59, 192, 81);
}<div class="box" nz-col><div class="left" nz-col nzXs="14" nzSm="14" nzMd="14" nzLg="14" nzXl="14" nzXXl="14">left<div class="left_f" nz-col><div class="left_f1"></div><div class="left_f2"></div><div class="left_f3"> </div></div></div><div class="right"  nz-col nzXs="10" nzSm="10" nzMd="10" nzLg="10" nzXl="10" nzXXl="20"> nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10"right <div class="right_r"nzXs="10" nzSm="10" nzMd="10" nzLg="10" nzXl="10" nzXXl="20"> <div class="right_r1" nz-col nzXs="10" nzSm="14" nzMd="18" nzLg="22"nzXl="24" >  <div id="right"  nz-col>  left 576px 响应式栅格，可为栅格数或一个包含其他属性的对象   number | object  </div> <div id="right_1" nz-col>  576px 响应式栅格，可为栅格数或一个包含其他属性的对象  number | object  </div> </div>            <div class="right_r2"> </div> <div class="right_r3"> </div>                                                    </div></div></div>

angular 响应式布局相关推荐

【前端】Angular的布局（响应式布局）笔记3
商品列表的分页展示+响应式布局一.参考代码网站:https://github.com/ikismail/Angular-ShoppingCart 二.其余参考资料: 1. 分页器:https://m ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
判断两个图片的特征向量_响应式布局提高篇图片正确的打开方式
作者 | Brilliant Open Web团队编辑 | Aaron 本文承接上一章的内容,接着介绍响应式布局设计,主要讲如何实现响应式图片.通过对图片适配问题的说明,加深对响应式图片的理解,并分 ...
总是听别人说响应式布局，原来这么简单
总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了一下分享给大家. 什么是响应式布局如图 ...
html响应式布局media,JS中使用media实现响应式布局
常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{-- } } @media scre ...
如何实现页面的响应式布局？
所谓响应式布局,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.他的好处我们不用写多套屏幕模板而只需要写一个就可以实现,现在用的比较多的就是bootstrap的响应式布局,而他实现的 ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为 ...
必须去收藏14个响应式布局的前端开发框架
必须去收藏14个响应式布局的前端开发框架前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式 ...

angular 响应式布局

angular 响应式布局相关推荐

最新文章

热门文章