关于 Bootstrap 示例

Question

我是 html 和 css 的新手，所以我只是实现了这个网站 http://getbootstrap.com/docs/4.1/examples/dashboard/ 当我通过按 cmd + '+' 或 Ctrl + '+' 进行放大时，我不希望左侧边栏消失。 （我想我可能想在手机屏幕上看到桌面版的网页。）也许这与dashboard.css文件中的sticky有关，但我不知道该怎么做。您可以通过从上面的链接查看源代码来查看dashboard.css 和相关文件。谢谢！

Answer 1

您可以将em 单元与媒体查询一起使用

.rwd-container {
   width : 50px;
   height : 50px;
   margin : 0 auto;
    background-color: blue;
}

@media (max-width: 30em) {
  .rwd-container {
    background-color: red;
  }
}

<div class="rwd-container"></div>

https://jsfiddle.net/o4s18wmL/8/

30em = 基本字体大小(16px) * 30 = 480px;

---

宽度 519px 超过 30em(480px)，媒体查询不适用于工作

---

缩放 font-size:110% ，宽度 461.278px 小于 30em(480px) ，媒体查询可以工作

---

相关：

• zooming-squishes

Answer 2

尝试移除侧边栏的属性 position: fixed;并显示：无；适用于移动设备。