Question

因此，当我将浏览器窗口的大小调整为小于480px时，我的网站会更改回原始样式（css未在mixins中定义）。我想我只是通过用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>

Answer 1

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

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

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

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

媒体查询断点忽略html min-width

1 个答案: