Bootstrap Media Querys

Question

我目前正在玩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;
    }
}

这会触发horizontal scrollbar - JSBin

引导程序中的人是否故意这样做，因为可能存在垂直滚动条？

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

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

Answer 1

Bootstrap Media Querys

设置媒体查询

Bootstrap支持四种媒体大小：

手机＆lt; 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这将使它溢出（应该如此）。 表示引导设置：body {margin:0;}

另一个例子是边界。除非box-sizing不是默认值，否则Border会为您的元素添加大小。虽然轮廓设置元素内的边框。

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

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

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

您可以使用它：Fiddle! 请记住，有些浏览器会以一定的宽度呈现它。

Answer 2

查看小提琴 https://jsfiddle.net/YameenYasin/as4Lmgas/1/

html {
  box-sizing: border-box;
}

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

body{
  margin: 0;  
}

div {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  height:auto;
  min-height:300px; // For testing purpose only
}
@media (min-width: 768px) {
  div {
    width: 750px;
    background: silver;
  }
}
@media (min-width: 992px) {
  div {
    width: 970px;
    background: yellow;
  }
}
@media (min-width: 1200px) {
  div {
    width: 1170px;
    background: red;
  }
}



<div></div>

CSS响应式垂直滚动条问题

2 个答案:

Bootstrap Media Querys