所以我正在制作一个新城市，而且我对 HTML 还比较陌生（但我很快就学会了），所以我从互联网上得到了很多帮助，哈哈。我已经磨练了大约一个星期了。现在，我的两个主要问题是：
当我调整浏览器窗口大小时，代码就会中断，并且不会调整到浏览器的大小（因此我假设它不会调整到比我的屏幕更小的屏幕）
我正在尝试制作图像地图，但在我的合作伙伴方面，在他的大屏幕上，我在特定区域周围的框除了一个之外都可以工作，并且无论我更改坐标多少次，它都不起作用在他这边。我认为这仍然与需要它具有响应能力有关，但我也想知道是否有一种方法可以修复图像映射，使其在所有设备上的正确区域都可单击。
我的朋友告诉我尝试 Flex，但我不太确定从哪里开始。
这是我的代码：
主页：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i.postimg.cc/N02sM3Q3/pupsville.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
a:link {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: black;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: black;
background-color: transparent;
text-decoration: underline;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pupsville</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="https://i.postimg.cc/J7JRG1P1/hearts.gif" id="hearts"/>
<div class="wrapper" id="homewrapper"></div>
<div class="sidebar" id="sidebar">
<p><a href=/altar.html>Altar</a></p>
<hr/>
<p>Journal</p>
<hr/>
<p>Contact / About</p>
<hr/>
<p><a href=/map.html>Explore</a></p>
<hr/>
<p>Puppy Corner</p>
</div>
<img src="https://i.postimg.cc/DyPFPB9H/d-028-00.png" id="dog">
<div class="body-text"></div>
<div class="main" id="homemain">
<em>As you get off the boat, you arrive to THE DOG Island.<br></br><br>The ocean crashes around the cliffs of the island, and you step into Pupsville from the Green Meadows.</br>
<br>A blanket of peace is draped over the town, and as you make your way into the square, dogs approach you, </br>
<br>sniffing and greeting you, welcoming you to their town. You walk past Dr. Potan's clinic, and a dog<br>
<br>by the name of Amalia approaches you. She tells you Noble has an open house, and he would be willing to</br>
<br>rent it out to you for free, so long as you help out the local dogs and stay out of trouble.</br><br>You've never been here before, but it already feels like home.</br>
</em>
</div>
<img src="https://i.postimg.cc/FzjvqZ7f/petasi.gif" id="petasi"/>
</body>
</html>
地图 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
.centermap {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 50%
}
</style>
</head>
<body style="background-color: #35edff">
<img src="https://i.postimg.cc/gd2JX0s0/map.webp" alt="map" id="map" usemap="#workmap" class="centermap">
<map name="workmap">
<area target="" alt="Rune Village" title="Rune Village" href="/runevillage.html" coords="300,150,650,270" shape="rect">
<area target="" alt="Snow Village" title="Snow Village" href="/snowvillage.html" coords="190,100,350,330" shape="rect">
<area target="" alt="Gigili Village" title="Gigili Village" href="/gigilivillage.html" coords="500,200,700,500" shape="rect">
<area target="" alt="Zoomy Village" title="Zoomy Village" href="/zoomyvillage.html" coords="390,400,597,711" shape="rect">
<area target="" alt="Pupsville" title="Pupsville" href="/home.html" coords="190,436,325,721" shape="rect">
<area target="" alt="Chiro Village" title="Chiro Village" href="/chirovillage.html" coords="200,350,312,462" shape="rect">
<area target="" alt="Ancient Grove" title="Ancient Grove" href="/ancientgrove.html" coords="290,330,400,420" shape="rect">
</map>
</body>
</html>
CSS：
#homewrapper {
display: flex;
justify-content: space-between;
}
#homemain,
#sidebar {
float: left;
margin-top: 20vh;
margin-bottom: 16vh;
border: 2px solid #3b1d08;
padding: 1.5vw;
background-color: rgb(158 100 52 / 80%);
text-align: center;
}
#homemain {
margin-left: 10vw;
margin-right: 4vw;
text-align: center;
}
.center {
border: 0.5vw solid;
margin: auto;
width: 50vw;
padding: 1vw;
}
.sidebar {
width: 10vw;
height: 35vh;
align-content: center;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 1vw;
}
#sidebar, #homemain {
box-shadow: 1vw 1vw #4d2408;
}
hr {
display: block;
height: 0.1vh;
border: 0;
border-top: 0.1vh solid #3b1d08;
margin: 1vh 0;
padding: 0;
}
#hearts {
float: right;
}
#petasi {
margin: 35vh 0.1vw 20vh;
}
#dog {
position: absolute;
margin-top: 52vh;
left: 10vw;
我试过了
@media only
...但这并不完全有效。它有点扰乱了我的布局，虽然我不介意进行调整，但它就是不起作用，如果它在不调整我的布局细节的情况下不起作用，我不认为它通常会以这种方式工作。但也许我只是没有采取更努力的态度。 （说实话，我非常沮丧，并且已经为此工作好几天了，哈哈，所以也许我太沮丧而无法付出更多努力）
我建议在浏览器中使用响应式布局功能（当然可以在 Chrome 和 Edge 中使用）。打开检查选项卡并启用响应式布局或选择设备布局。然后在浏览器中使用 edit as HTML 编辑 css。尝试向元素添加不同的样式，并找到可以增强网站在设备中的责任的最佳代码 另外，我无法理解您想要做什么，因为您提到的网站不具有移动响应能力