css - Angular Material中的模态布局响应
问题描述
我对在 Angular Material 中使用模态的响应性有疑问。我怎样才能让它在小屏幕上看起来不错。它不必是 mat-grid
请看这个stackblitz链接
openDialog() {
const dialogRef = this.dialog.open(ModalComponent, {
width: "650px",
height: "380px"
});
}
解决方案
Demo你可以在 style.css 中使用媒体查询
@media only screen and (max-width: 700px) {
.modal .mat-grid-tile {
width:100% !important;
position:relative!important;
left:0 !important;
}
.modal .mat-form-field {
width: 100%
}
.modal .mat-radio-button {
padding: 10px;
}
.modal .mat-raised-button.mat-warn {
margin:5px
}
}
推荐阅读
- c# - C# 中的毫秒数 - long 还是 int?
- node.js - 如何使用“限制为 1 个响应”提交 Google 表单并绕过登录?
- ckeditor - CKeditor 在嵌入 twitter/instagram 时删除某些部分
- javascript - 如何制作单个工作表的副本并将其保存到谷歌工作表中的文件夹
- c# - 检测我是否点击了文本的某个部分
- java - 没有vba模块下载的excel文件
- dotfuscator - 编译器创建匿名类型:易破坏的行为
- visual-studio-code - 如何停止 VS Code“转到定义”去键入文件而不是代码?
- cordova - 离子科尔多瓦键盘隐藏输入
- android - 没有在 android studio 中启动内部 HTTP 服务器