媒体查询断点忽略 html min-width [重复]答案

【问题标题】：media query breakpoint ignores html min-width [duplicate]媒体查询断点忽略 html min-width [重复]
【发布时间】：2015-09-14 22:11:00
【问题描述】：

因此，当我将浏览器窗口的大小调整为小于 480 像素时，我的网站会变回原始样式（未在 mixins 中定义的 css）。我想我可以通过使用min-width 限制html 来解决这个问题，但是虽然浏览器有一个水平滚动条，但css 仍然会发生变化。为什么会这样？我该如何解决？

html {
  min-width: 500px;
}

/********************************
HEADER
********************************/
.header img, .header h1 {
  float: left;
}
.header h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 480px) {
  .header h1 {
    font-size: 2em;
  }
}
@media only screen and (min-width: 768px) {
  .header h1 {
    font-size: 3em;
  }
}
@media only screen and (min-width: 992px) {
  .header h1 {
    font-size: 4em;
  }
}
@media only screen and (min-width: 1200px) {
  .header h1 {
    font-size: 5em;
  }
}

html供参考：

<!doctype html>
<html>
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ZIC Knjižnica</title>

        <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&subset=latin-ext,latin' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="styles/style.css">

    </head>

    <body>
        <div class="header">
            <img src="img/ijs_logo.gif">
            <h1>ZNANSTVENO INFORMACIJSKI CENTER</h1>
        </div>
    </body>

</html>

【问题讨论】：

你最小的断点指定(min-width: 480px)，你认为当你小于480px时会发生什么？
我以为我不会小于 480px，因为我指定了 html 最小宽度。
您说您在 html 元素上添加了 min-width 作为“解决方法”。
有人已经在回答中解释得够多了，所以我想我明白了。无论如何都感谢您尝试

标签： html css

【解决方案1】：

为width 和height 媒体功能设置根元素的最小或最大尺寸不会限制视口的尺寸。

正如您所观察到的，一旦您将视口的大小调整为小于 480 像素，浏览器就会创建一个水平滚动条。由于它自己的 min-width 声明，根元素保持 480px 宽，但是 viewport 太窄而无法包含它，这就是滚动条出现的原因。这意味着 viewport 比 480px 窄，因此不再匹配 (min-width: 480px) 表达式。

您不能在桌面浏览器中限制视口尺寸。如果您希望 (min-width: 480px) 中的样式即使在浏览器窗口小于 480 像素时也适用，请完全删除 @media 条件：

.header h1 {
  font-family: 'Lato', sans-serif;
  font-size: 2em;
  font-weight: 900;
}
@media only screen and (min-width: 768px) {
...

【讨论】：