打开MASA Blazor的正确姿势3.2：响应式
一、响应式显示的本质
无论是在框架层次，如Blazor、Vue、React，还是在组件层次，如MASA Blazor、BootStrap、Bootstrap Blazor、ElementUI、AntDesign，尽管在开发环节有诸多差异，但在浏览器的运行环节，只要没有脱离Web，都是被编译为HTML、CSS和JS（WebAssemble是个变数）。所以，它们的任何特性，都必须依赖于HTML、CSS和JS。而响应式显示，能够根据窗口大小来改变布局样式，其依据就是CSS3的媒体查询（详见上一章节HTML和CSS基础），如下所示：
//格式
@media screen and (max-width: 1200px) {
body {
background-color:blue;
}
}
//案例：
//手机、平板或电脑类型，且页面可视区域小等于600px时，使用以下样式
@media screen and (max-width: 600px) {
body {
background-color:lightblue;
}
}
//手机、平板或电脑类型，且页面可视区域小等于1200px时，使用以下样式
@media screen and (max-width: 1200px) {
body {
background-color:red;
}
}
下图为MASA Blazor的响应式说明。所谓断点，其本质是定义了媒体类型为screen和媒体特性为max-width的一系列媒体查询样式，从而实现响应式显示。当然，实际的实现会比上述的更加复杂，比如使用CSS变量等，这些我们暂且不去深究，灵活掌握用法才是首要。注：MASA Blazor中最小的断点xs，不需要显式标注，如d-xs-none和d-none是等效的（d-none对应于CSS属性{display:none;}）。xs、sm、md、lg和xl五个断点，记住xs是指手机屏幕，其它就可以类推了。
二、MASA Blazor中具有响应式特性的样式或组件属性：
1、容器显示方式：
.d-none.d-inline.d-block.d-inline-block.d-flex.d-inline-flex：- 此样式对应于CSS的display属性
- 断点格式如
.d-lg-block。 - 如下所示，当页面小于lg时，将隐藏，页面大于lg后，以块级元素显示：
<div class="d-none d-lg-block">ABC</div>
2、Flex弹性布局中定义在容器和项目上的所有属性（关于弹性布局，详见下一章节）：
.d-flex.d-inline-flex：- 此样式对应于CSS的display属性
- 断点格式如 .d-sm-flex。
.flex-row.flex-row-reverse.flex-column.flex-column-reverse：- 此样式对应于CSS的flex-direction属性
- 断点格式如 .flex-sm-row
.flex-nowrap.flex-wrap.flex-wrap-reverse：- 此样式对应于CSS的flex-wrap属性
- 断点格式如 .flex-xl-wrap
.justify-start.justify-end.justify-center.justify-space-between.justify-space-around：- 此样式对应于CSS的justify-content属性
- 断点格式如 .justify-lg-space-between
.align-start.align-end.align-center.align-baseline.align-stretch：- 此样式对应于CSS的align-items属性
- 断点格式如 .align-xl-stretch
.align-content-start.align-content-end.align-content-center.align-content-space-between.align-content-space-around.align-content-stretch：- 此样式对应于CSS的align-content属性
- 断点格式如 .align-md-content-space-around
.order-first.order-{0~12}.order-last：- 此样式对应于CSS的order属性
- 断点格式如 .order-sm-5
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-auto.align-self-stretch：- 此样式对应于CSS的align-self属性
- 断点格式如 .align-self-lg-start
.flex-grow-{0~n}：- 此样式对应于CSS的flex-grow属性
- 断点格式如 .flex-lg-grow-1
.flex-shrink-{0~n}：- 此样式对应于CSS的flex-shrink属性
- 断点格式如 flex-lg-shrink-1
3、Grid网格布局
- 由MContainer、MRow、MCol和MSpacer四个组件组成（详见Grid网格布局章节），分别定义容器、行、列和剩余空间占位。其中MRow可以独立使用，但是MCol必须为MRow的子元素，每个MRow下可以有多个MRow。MRow将每一行分为12格，MRow的子组件MCol，通过
Cols、Sm、Md、Lg、Xl属性，分别定义本列在xs、sm、md、lg和xl断点下所占的格数，如下所示：<MRow><MCol Cols=”6”></MCol></MRow>：xs断点下占据6格<MRow><MCol Cols=”12” Md=”6”></MCol></MRow>：xs断点下占据12格，md断点下占据6格
4、浮动
.float-left.float-right.float-start.float-end.float-none：- 此样式对应于CSS的float属性
- 断点格式如 .float-sm-end
5、间距
.m {l|r|t|b|x|y|a}-{0~16|n1~n16|auto}：- 此样式对应于CSS的margin和margin-right等属性
- 断点格式如 .mx-sm-4
.p {l|r|t|b|x|y|a}-{0~16|n1~n16|auto}：- 此样式对应于CSS的padding和padding-right等属性
- 断点格式如 .pb-lg-n3
6、文本对齐
.text-left.text-center.text-right.text-right.text-justify：- 此样式对应于CSS的text-align属性
- 断点格式如 .text-sm-left
6、文本大小
.text-h1~h6.text-subtitle-1~2.text-body-1~2.text-button.text-overline.text-caption：- 此样式对应于CSS的文本大小属性
- 断点格式如 .text-sm-h1
7、溢出
.overflow-auto.overflow-hidden.overflow-visible.overflow-x-visible等：- 此样式对应于CSS的overflow属性
- 断点格式如 .overflow-sm-auto
