Datepicker：在小显示器上截断答案

【问题标题】：Datepicker: cut off on small displaysDatepicker：在小显示器上截断
【发布时间】：2020-06-19 06:19:02
【问题描述】：

我正在尝试在小屏幕上显示完整的日期选择器日历，但无法访问整个日历。

当显示小于日期选择器时，没有滚动，也没有可能到达日期选择器的所有内容。

任何日期选择器都会发生这种情况，例如来自官方页面的：

https://material.angular.io/components/datepicker/overview

重现步骤：

缩小导航器窗口，高度不超过 300 像素
打开日期选择器
尝试访问打洞日（这是不可能的）

环境角度：9.0.2

CDK/材料：9.0.1

浏览器：Chrome 和 Firefox（最新版本）

操作系统：Windows 10

【问题讨论】：

标签： angular scroll datepicker angular-material

【解决方案1】：

就在你的styles.css（或styles.scss）中

.mat-calendar {
    width: 200px!important;
    height: 260px!important;
    font-size:.9em
}
@media(min-width:257px)
{
  .mat-calendar {
    font-size:1em;
    width: 250px!important;
    height: 324px!important;
  }
}
@media(min-width:300px)
{
  .mat-calendar {
    width: 296px!important;
    height: 354px!important;
  }
}

注意：您可以根据要求更改媒体查询大小

【讨论】：