媒体查询断点忽略 html min-width [重复]
Posted
技术标签:
【中文标题】媒体查询断点忽略 html min-width [重复]【英文标题】：media query breakpoint ignores html min-width [duplicate] 【发布时间】：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 作为“解决方法”。
有人已经在回答中解释得够多了，所以我想我明白了。无论如何都感谢您尝试
【参考方案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)
...
【讨论】：
以上是关于媒体查询断点忽略 html min-width [重复]的主要内容，如果未能解决你的问题，请参考以下文章