如你所见，我不能在查看模式下最小化宽度，但我可以在检查模式下做到。为什么？
下面是我的网站的代码：
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<meta name="description" content="N"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="robots" content="all"/>
</head>
<body>
<section id="contact">
<div class="social">
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-behance"></i></a>
</div>
<div class="contact-box">
<div class="c-heading">
<h1>Get In Touch</h1>
<p>Call Or Email Us Regarding Question Or Issues</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1701.5252574812218!2d74.31603229143637!3d31.46779655679461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391906abd2d8f2db%3A0x2d4bd93a1eb25b41!2sArfa%20Technologies!5e0!3m2!1sen!2s!4v1596774150754!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</section>
</body>
</html>body{
margin:0px;
padding: 0px;
background-color: #FFFFFF;
}
a{
text-decoration: none;
}
.social a{
padding: 20px;
color:#7b7c7c;
font-size:1.1rem;
}
#contact{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
}
.social{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.social a:hover{
color:#000000;
transition: all ease 0.3s;
}
.contact-box{
background-color:#434445;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 30px;
box-shadow: 2px 0px 30px rgba(0,0,0,0.1);
}
.c-heading h1{
font-family: Roboto;
color: #e7eef3;
font-size: 2.5rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
}
.c-heading p{
font-family: Roboto;
color:#cecece;
font-size: 0.8rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
text-align: center;
}
.map{
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}
@media(max-width:1100px){
.map{
display: none;
}
}
@media(max-width:450px){
.social{
display: none;
}
.contact-box{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
#contact{
position: static;
transform: translate(0,0);
width:100%;
height: 100vh;
box-sizing: border-box;
}
.c-heading h1{
font-size: 2.2rem;
text-align: center;
}
}Viewing modeInspecting mode
我尝试了一些@media和max-width的设置，但还是不起作用。为什么我不能在正常浏览的时候改变网站的宽度，但是我可以在浏览的时候改变呢？
我查看了代码，没有发现问题。
1条答案
按热度按时间bejyjqdl1#
你的代码实际上是罚款，它的最小浏览器大小为 chrome （我测试）和其他浏览器，我不明白为什么你会使它这么小，但这里是最小的大小，我可以得到与检查元素
https://ibb.co/sCQQnV9
这不是你的代码，而是浏览器
希望能有所帮助