CSS响应式垂直滚动条问题

我目前正在玩bootstraps v2.3.2. media querys(我没有使用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

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

更新：作为查看bootstrap 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;
    }
}

这将触发水平滚动条 – JSBin

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

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

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

最佳答案

Bootstrap Media Querys

设置媒体查询

Bootstrap支持四种介质尺寸：
>手机< 768px(8英寸)
>平板电脑≥768px
>台式机≥992px(10.33英寸)
>台式机≥1200px(12.5英寸)

这些不是固定尺寸！

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

首先,所有现代浏览器的主体元素确实有它的余地.
例如：Webkit浏览器：body {margin：8px;}所以如果您的元素为768px,margin-top为8,margin-bottom为8,则得到：784px
所以你的屏幕是768px(或更少),你的内容是784px这将使它溢出(应该如此).那说bootstrap设置：body {margin：0;}

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

Did the guys from bootstrap did that on purpose,because of the possibily that there can be the presence of vertical scrollbar ?

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

Question: Why can’t I use the minimal possible width in the media query when the vertical scrollbar is present?

你可以使用它：Fiddle!
请记住,某些浏览器会以一定的宽度呈现它.

CSS响应式垂直滚动条问题

相关文章