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

【问题标题】：Website not scaling correctly when resizing browser & mobile phone调整浏览器和手机大小时网站无法正确缩放
【发布时间】：2020-01-14 20:53:09
【问题描述】：

当我尝试调整网站大小或在手机上查看时，我的网站无法正确缩放。我添加了以下 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

【问题讨论】：

有网站链接吗？为了预览问题
好的，谢谢！ patricesprojects.info/atlanta/index.html
媒体查询是解决方案。定位一些断点并包含您的修复样式w3schools.com/howto/howto_css_media_query_breakpoints.asp
谢谢，我正在查看这个。
嗨，我检查了媒体查询并在我的 CSS 中尝试了它们，但我没有看到太大的不同。你有什么其他建议吗？

标签： html css meta

【解决方案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 的情况下增加其大小而不会对导航的高度产生重大影响。注意下面两张图片的区别：

您应该使用媒体查询使其对基于某些断点的设备具有响应性。阅读以下关于他们的链接

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

它使用 mobile-first approach 和它。如果您需要先使其成为桌面，请尝试了解它是如何制作的。另外阅读此guide on flexbox 以了解如何使用示例中使用的flex 对齐和证明内容。

【讨论】：

非常感谢！我仍在尝试理解媒体查询，感谢您提供的信息。

【解决方案2】：

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

em 单元的默认大小是16px，因此这些元素至少设置为640px 宽，这会为呈现小于该值的设备拉伸您的页面。

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

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

【讨论】：

谢谢，我试着玩一下 img 标签。我也尝试了最大宽度，但我的图像没有居中。
@patrice123 在其父元素上使用text-align: center 居中图像。或者，如果图像是display: block，则使用margin: 0 auto。
谢谢！你会碰巧知道我可以使用导航栏、页脚和文本吗？我一直在尝试玩弄它，但我无法弄清楚。当我的网站在我的桌面上调整大小时，导航栏标题和徽标重叠。背景图像和背景图像下的部分被截断。文本也向左移动，而不是中心。我也尝试添加媒体查询，但没有成功。

【解决方案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;
}

【讨论】：

谢谢，我刚刚输入了您的代码，导航栏标题和徽标仍然重叠。背景图像和背景图像下的部分被截断。文本也向左移动，而不是中心。我一直在尝试使用 CSS 来解决这个问题。我也尝试添加媒体查询，但没有成功。