html - 如何让 Bootstrap 看起来更 "Compact"

Question

我希望拥有与使用浏览器缩放时相同的“紧凑”外观 - 在 font-size、padding 和空间的一般使用方面-输出(Ctrl--)。当然没有副作用，最重要的是减少容器宽度。

我试过在 Bootstrap 的 http://getbootstrap.com/2.3.2/customize.html 中摆弄 @baseFontSize 和 @baseLineHeight 变量|下载屏幕，但结果我遗漏了一些东西:

1. 看起来不对 - 在平衡方面，填充不对。

2. 投影仪屏幕中断(恐怖!)- 选择框、布局，一切都变得疯狂。

请保释我!

Answer 1

在你的 html 标签中使用媒体查询并使用基于它的 rem 单位怎么样？开始可能为时已晚，但我发现这是一种控制间距的手动方式，

html{
    background: $black;
      scroll-behavior: smooth;
    padding:0;
    margin:0;
        @media screen and (min-width: 2560px){
                font-size:16px;
        }
        @media screen and (min-width: 1920px) and (max-width: 2559px){
                font-size:15px;
        }
        @media screen and (min-width: 1681px) and (max-width: 1919px){
                font-size:15px;
        }
        @media screen and (min-width: 1441px) and (max-width: 1680px){
                font-size:13px;
        }
        @media screen and (min-width: 1366px) and (max-width: 1440px){
            font-size:13px;
        }
        @media screen and (min-width: 1024px) and (max-width: 1365px){
            font-size:12px;
        }
        @media screen and (min-width:992px) and (max-width: 1023px) {
            font-size:12px;
        }
        @media screen and (min-width:768px) and (max-width: 991px) {
            font-size:12px;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
                font-size:12px;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
                font-size:12px;
        }
        @media screen and (max-width:350px) {
                font-size:12px;
        }