Question

当我尝试调整网站大小或在手机上查看网站时，我的网站无法正确缩放。我添加了下面的META标签，但是它不起作用。请指教，谢谢。

http://patricesprojects.info/atlanta/index.html

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


   <link rel="stylesheet" href="atlanta.css">
   <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Pacifico">
   <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto">
 </head>
<body>
  <header id="header">
   <div id="logo">
      <img src="logohtml.png" alt="logo" id="header-img">
   <span>Welcome to Atlanta!</span>
   </div>

  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#"><b>Things to Do</b></a></li>
      <li><a class="nav-link" href="#"><b>Where to Eat</b></a></li>
      <li><a class="nav-link" href="#"><b>Events</b></a></li>
      <li><a class="nav-link" href="#"><b>Hotels</b></a></li>
      <li><a class="nav-link" href="#"><b>Parking</b></a></li>
     </ul>
  </nav>
</header>
</header>

编辑

如果需要CSS代码，请提出警告，再次感谢。

编辑这是网站更新后的外观。第一张图片是更新之前的样子。 enter image description here enter image description here

Answer 1

这些是我可以用来改善网站的注释和建议。

css代码语法很多错误
标题图像包含不正确。删除填充并将height: 70vh;添加到#about-us
将padding: 0px 20px添加到h1，以在标题的两边添加一些空格
通过将ul设置为0来删除text-align: center;中的所有填充，以删除默认情况下剩余的多余空格。
赋予页脚<img>使其内容居中。

所有img{ width: 100%; height: 50vh; object-fit: cover; }都在小型设备/宽度上溢出，可以通过添加以下样式来包含它们并作出响应。

position: absolute

对于导航栏

首先，应裁剪徽标图像以删除其周围的所有空白区域。这样一来，即使不使用flex，也可以增加其大小，而对导航栏的高度没有重大影响。请注意下面两张图片的区别：

您应该使用媒体查询，使其根据某些断点响应设备。阅读有关它们的以下链接

以下是导航栏的工作示例 https://codepen.io/DohaHelmy/pen/xxbzzRN

它使用 mobile-first approach 及其它。如果需要先将其制作为桌面，请尝试了解其制作方法。另外，请阅读此guide on flexbox，以了解如何使用示例中使用的let playList = [] for (let i = 0; i < result.length; i += 1) { playList.push(axios.get( `${process.env.user}/client/${result[i].id}` ).then(res => { if (res.data.success === true) { result[i].Name = rider.data.client.Name; result[i].PhoneNumber = rider.data.client.Number; } }).catch(ex => console.log(ex))); } await Promise.all(playList)来对齐和对齐内容。

Answer 2

您在整个页面中使用的尺寸较大，例如将img元素设置为width: 40em，或使用#about-us设置padding: 20em。

em单位的默认大小为16px，因此这些元素的宽度至少设置为640px，这使您的页面在显示尺寸小于该值的设备上得到扩展

如果您希望网站可以缩小规模，请尽量避免使用较大的硬编码尺寸。例如，对于图像，您可以使用这样更灵活的东西：

img {
  max-width: 40em;
  width: 100%;
}

Answer 3

不确定在这里使用position: absolute;的原因是什么。通常，这样做不是一个好习惯（至少在这种情况下）。您可以使用flex定位所有元素。另外，为徽标提供width: 40rem;会引起大多数问题，因为它试图在每种屏幕尺寸上保持其宽度。

因此，对于徽标，您可以执行以下操作-

#header-img {
max-width: 220px;
width: 100%;

清除所有位置并仅使用flex-

    header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    background-color: #ffaa63;
    color: white;
    font-family: 'Pacifico', serif;
    padding: 1.5em;
    max-width: 100%;
    box-shadow: 0px 10px 20px grey;
    height: auto;
}
#logo span {
     /* position: relative; */
    /* left: 150px; */
    text-shadow: 2px 2px 4px #000000;
}
#nav-bar ul {

    /* position: relative; */
    /* right: 75px; */
    list-style-type: none;
}
#nav-bar ul li {
    /* float: left; */
    margin: 0px 15px;
    color: #fff;
    text-shadow: 2px 2px 4px #f2f2f2;
}

调整浏览器和手机大小时网站无法正确缩放

3 个答案:

这些是我可以用来改善网站的注释和建议。

对于导航栏