Chrome和Firefox在开发人员工具启动时都会呈现我的页面并响应窗口页面大小，但在开发人员工具未启动时则不会。
调试器存在-注意内容居中。x1c 0d1x
Dubugger关闭-内容现在比窗口宽。
来自VS代码的HTML
<html xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Karl Mochel's Work Experience</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/ce8498ab41.js" crossorigin="anonymous"></script>
<script src="src\gallery.js"></script>
<link href="sass/style_test.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top_navbar">
<div class="name">
Karl Mochel
</div>
<div>
<nav class="nav basic">
<a href="#" class="active">Work</a>
<a href="values.html">Values</a>
<a href="about.html">About</a>
</nav>
</div>
<div class="name balance">kalmdesigns</div>
</header>
<div class="container">
</div>
</body>
</html>VS代码中的CSS
@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Merriweather");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Merriweather", "Times", serif;
font-size: 1rem;
line-height: 1.75rem;
color: #d3e0ee;
background-color: rgb(44, 62, 77);
min-width: 100vh;
min-height: 100vh;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
a {
color: #7cbbff;
text-decoration: none;
}
a:hover {
color: #B6C1CC;
text-decoration: none;
}
a:visited {
color: #7cbbff;
text-decoration: none;
}
.container {
flex: 1 0 auto;
margin: 0 auto;
margin-inline: max(20px, 50% - 450px);
background-color: white;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.top_navbar {
width: 100%;
height: 56px;
background: #B6C1CC;
z-index: 100;
display: flex;
justify-content: space-between;
}
.top_navbar .name {
font-family: "Oswald", "Roboto", sans-serif;
font-size: 2.6rem;
color: rgb(44, 62, 77);
line-height: 3rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
flex: 1 1 auto;
}
.top_navbar .name a {
color: rgb(44, 62, 77);
}
.top_navbar .nav {
display: flex;
flex-direction: row;
font-family: "Oswald", "Roboto", sans-serif;
font-size: 2.25rem;
color: rgb(44, 62, 77);
}
.top_navbar .nav a {
margin: 0px 15px 0px 15px;
color: rgb(44, 62, 77);
}
.top_navbar .nav a:visited {
color: rgb(44, 62, 77);
}
.top_navbar .nav a:hover {
color: #5f90c2;
}
.top_navbar .nav a.active {
color: rgb(255, 255, 255);
}
.top_navbar .close {
flex: 1 1 auto;
align-self: flex-start;
text-align: right;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 3rem;
}
.top_navbar .close .fa-xmark {
padding-top: 0.25rem;
color: rgb(44, 62, 77);
}
.top_navbar .close .fa-xmark:hover {
color: #5f90c2;
}
.top_navbar {
align-items: baseline;
}
.top_navbar .basic {
justify-content: center;
display: flex;
flex-direction: row;
}
.top_navbar .company {
display: flex;
flex-direction: row;
}
.top_navbar .company .bc_work > a {
margin-left: 0px;
margin-right: 0px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.top_navbar .company .bc_icon {
font-size: 0.75rem;
color: rgb(44, 62, 77);
}
.top_navbar .company .bc_company {
flex: 0 0 auto;
align-content: center;
text-align: center;
color: rgb(255, 255, 255);
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.top_navbar .balance {
flex: 1 1 auto;
text-align: right;
font-size: 2rem;
}使用Chrome版本110.0.5481.104（官方版本）（64位）、Firefox 110.0（64位）
1条答案
按热度按时间ukqbszuj1#
该问题是由排印错误min-width：100 vh，而不是100 vw（在 body 描述符中）。
虽然这解决了正常显示的问题，但这并不能解释为什么当开发人员工具处于活动状态时，页面的最小宽度为100 vw...