【发布时间】：2021-07-18 17:47:37
【问题描述】：
我想知道是否有任何与媒体查询相关的我不知道的东西，这使我的 Web 项目在开发工具和移动设备上看起来有所不同。 需要明确的是，我制作了一个网页并开始添加媒体查询以使其具有响应性。我使用 chrome dev-tools 选择 iphone se 作为目标，并开始重新排列每个元素，直到它看起来像我预期的那样。像这样：
但是当我在实际手机上打开网页时，它看起来像这样：
这是css：
@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;
}
}
还有 html，但大部分内容都是通过 vanilla js 创建的：
<!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单位垂直定位元素不是一个好主意。让它们流动。在你的真实手机上，你有地址栏和底部菜单来降低视口的高度，这会影响vh。如果您在浏览器模拟器中选择Responsive并调整高度，您将看到相同的结果：imgur.com/a/iX9X0Ar -
谢谢！我没有那样考虑地址栏。但问题是我不知道我是否可以让它们流动，因为我所有的位置都是绝对的，所以我至少需要使用边距来定位它们，不是吗？
-
position: absolute有时很有用，但是当改变屏幕尺寸时，多个元素很难很好地协同工作，尤其是当宽度和高度都起作用时。如果你让它们流动，是的，你可以使用边距来确保导航栏和赞助商栏之间的距离保持你想要的距离。如果您希望元素重叠（例如您的徽标），您可以使用负边距
标签： javascript css responsive-design media-queries responsive