CSS响应式垂直滚动条问题

Question

我正在玩bootstraps v2.3.2.媒体查询(我没有使用bootstraps网格,只有那4个媒体查询)在手机和平​​板电脑设备上测试它们,我注意到我不断得到一个水平滚动条,我不明白为什么？

基本上我有一个div和这个CSS:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body{
    margin:0;
    /* height: 3000px; */  /* forced vertical scrollbar */
    height: 300px;
}

div{
    padding: 0 10px;
    margin: 0 auto;
    background: aqua;
    width: 980px;
    border: 1px solid black;
    height: 100%;
}

/* Large desktop */
@media (min-width: 1200px) {
    div{
        background: red;
        width: 1200px;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    div{
        background: yellow;
        width: 768px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    div{
        background: blue;
        width: 100%;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    div{
        background: green;
    }
}

---

我强制垂直滚动条的情况:JSBin

但是当我不强制垂直滚动条时,我得到了想要的结果:JSBin

---

所以它显然是由于垂直滚动条.我发现这篇文章是关于响应式网页设计中的滚动条问题,但我在Chrome和FF中都得到了相同的结果.

---

更新:为寻找源引导V3.3.2我发现他们有新媒体的质疑,但是,他们不使用最小可能宽度的.container.这是他们的媒体查询:

@media (min-width: 768px) {
    .container {
        width: 750px; /* 18px difference */
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px; /* 22px difference */
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px; /* 30px difference */
    }
}

这是JSBin.即使我强制显示垂直滚动条,也不会触发水平滚动条.

但是,如果我想使用媒体查询的最小可能宽度,例如:

@media (min-width: 768px) {
    .container {
        width: 768px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 992px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}

这将触发horizontal scrollbar- JSBin

来自bootstrap的人是否故意这样做,因为可能存在垂直滚动条？

---

问题:当垂直滚动条存在时,为什么我不能在媒体查询中使用最小可能宽度？

我知道这可能是一个新手问题,但如果有人为我澄清这一点,我将不胜感激.

Answer 1

Bootstrap Media Querys

设置媒体查询

Bootstrap支持四种介质尺寸:

手机<768px(8英寸)

平板电脑≥768px

台式机≥992px(10.33英寸)

台式机≥1200px(12.5英寸)

这些不是固定尺寸!

如果您的屏幕最小宽度为768px,则应触发媒体查询.
但是,将容器设置为768px几乎总会使该屏幕溢出

首先,所有body现代浏览器的元素都有一定的余地.
例如:Webkit浏览器:body {margin: 8px;}所以如果你的元素为768px,margin-top为8,margin-bottom为8,784px
那么你的屏幕是768px(或更少)而你的内容是784px,这将使它溢出(因为它应该).那说bootstrap设置:body {margin:0;}

另一个例子是边界.边框会为元素添加大小,除非box-sizing不是默认值.轮廓设置元素内的边框.

来自bootstrap的人是否故意这样做,因为可能存在vertical scrollbar？

有可能这样,但我认为他们设置它,因为有一堆css属性影响大小,所以他们给出了一个错误的边缘,以避免奇怪的行为,如水平滚动条弹出.

问题:当垂直滚动条存在时,为什么我不能在媒体查询中使用最小可能宽度？

你可以用它:小提琴! 请记住,某些浏览器会以一定的宽度呈现它.