Javascript 在DEV-TOOLS上响应WEB的外观与在实际手机上不同
我想知道是否有任何与媒体查询相关的东西使我的web项目在开发工具和移动设备上看起来有所不同。 为了清楚起见，我制作了一个网页，并开始添加媒体查询以使其响应。我使用chrome开发工具选择iphone se作为目标，并开始重新安排每个元素，直到它看起来像我预期的那样。大概是这样的： 但当我在实际手机上打开网页时，它看起来像这样： 以下是css：Javascript 在DEV-TOOLS上响应WEB的外观与在实际手机上不同,javascript,css,responsive-design,media-queries,responsive,Javascript,Css,Responsive Design,Media Queries,Responsive,我想知道是否有任何与媒体查询相关的东西使我的web项目在开发工具和移动设备上看起来有所不同。 为了清楚起见，我制作了一个网页，并开始添加媒体查询以使其响应。我使用chrome开发工具选择iphone se作为目标，并开始重新安排每个元素，直到它看起来像我预期的那样。大概是这样的： 但当我在实际手机上打开网页时，它看起来像这样： 以下是css： @media screen and (max-width: 330px ){ /*for iphone 5/se */ #burter{
@media screen and (max-width: 330px ){ /*for iphone 5/se */
#burter{
top: 19vh;
left: 24vw;
font-size: 9vw;}
#logo{
width: 23vw;
top: 17vh;
left: 0vw;}
#navtabs{
top: 30vh;
left: 2vw;
flex-direction: row;
height: 14vw;
width: 88vw;}
.divisor{
width: 8%;}
.tab{
font-size: 4vw;}
#imgside{
display: none;}
#sponsors{
width: 88vw;
height: 15vw;
top: 40vh;
left: 2vw;
flex-direction: row;
}
.sponsimg{
width: 14%;}
#welcome{
left: 28vw;}
#welcome h2{
font-size: 13vw;}
#welcome p{
width: 67vw;}
.homecontainer{
width: 64vw;
left: 9vw;
height: 43vh;
top: 57vh;}
.homeheader{
font-size: 6vw;}
.hometext{
font-size: 3vw;
line-height: 1.5;}
#map{
width: 70vw;
left: 12vw;
top: 53vh;
height: 30vh;}
#contactus{
left: 26vw;
top: 82vh;}
#divmedia{
width: 80vw;
left: 7.7vw;
bottom: 3vh;}
.media{
font-size: 9vw;}
#menucontainer{
top: 48vh;
height: 75vh;
width: 121vw;
left: -14vw;
justify-content: space-evenly;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="./main.js"></script>
<title>Burter Burguer Inc.</title>
<link rel = "icon" href =
"../images/burguerlogo/logo.png"
type = "image/x-icon">
<link rel="stylesheet" href="stylesheet.css">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA89atXDJHDp5fVs2YF-DB1fQXVbn3GgZM&callback=initMap">
</script>
</head>
<body id="body">
<div id="header">
<img id="logo" src="../images/burguerlogo/logo.png">
<h1 id="burter">BURTER INC.</h1>
<div id="navtabs">
<button id="homebutton" class="tab">HOME</button>
<div class="divisor"></div>
<button id="menubutton" class="tab">MENU</button>
<div class="divisor"></div>
<button id="contactbutton" class="tab">CONTACT</button>
</div>
<div class="removable" id="welcome">
<h2>WELCOME</h2>
<p>To your new favourite food...</p>
</div>
<img id="imgside" src="../images/Clever Photo Mashups by Stephen McMennamy.jpeg">
<div id="sponsors">
<img class="sponsimg" src="../images/mc_cain-removebg-preview.png">
<img class="sponsimg" src="../images/cocacola-removebg-preview.png">
<img class="sponsimg" src="../images/corona-removebg-preview.png">
<img class="sponsimg" src="../images/heinz.png">
</div>
</div>
<div style="display: none;" id="map"></div>
</body>
</html>
伯特博格公司。
伯特公司。
家
菜单
联系
欢迎
给你最喜欢的新食物
我在寻找答案，但找不到任何可以帮助我的东西，所以我非常感谢您的帮助，以便解决这些问题，因为我正在尝试建立一个投资组合，但没有响应的网站看起来一点都不好。谢谢大家! 这可能是因为元素的位置是基于视口大小的，但元素的实际大小不是基于视口缩小/扩大的。我个人不会使用vh单位，但如果必须，请尝试在视口尺寸变小时稍微收缩元素。使用
vhvhResponsiveposition:absolute