如何为Bootstrap Datepicker设置桌面与移动端不同尺寸？

这问题我之前在项目里也碰到过，直接写固定宽高确实会导致所有设备尺寸一致，其实用CSS**媒体查询（Media Queries）**就能轻松实现不同设备的尺寸区分，完全适配你的AngularJS + Bootstrap Datepicker技术栈！

具体实现方案： #

你只需要把原来的固定尺寸CSS，替换成带媒体查询的代码，根据屏幕宽度来分别设置桌面端和移动端的尺寸：

/* 桌面端（屏幕宽度≥768px时生效，可根据需求调整阈值） */
@media (min-width: 768px) {
  .datepicker, .table-condensed {
    width: 500px;
    height: 500px;
  }
}

/* 移动端（屏幕宽度<768px时生效） */
@media (max-width: 767px) {
  .datepicker, .table-condensed {
    width: 300px;
    height: 300px;
    /* 可额外调整内边距、字体大小，让移动端显示更友好 */
    padding: 5px;
    font-size: 14px;
  }
}

额外优化提示： #

• 如果你的AngularJS项目是通过指令封装的Datepicker，建议给Datepicker容器加一个自定义类（比如custom-datepicker），然后把选择器改成.custom-datepicker .datepicker, .custom-datepicker .table-condensed，这样能避免全局修改影响到其他Datepicker组件。
• 你可以根据UI需求调整媒体查询的宽度阈值（比如用992px作为桌面端分界），或者修改宽高数值来匹配设计稿。

内容的提问来源于stack exchange，提问作者Chuck Villavicencio