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

问题描述 投票：-2回答：3

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

html css meta
3个回答
0
投票

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

em单位的默认大小为16px，因此这些元素的宽度至少设置为640px，这将使页面呈现的尺寸小于该值。

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

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

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

  • 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，就可以增加其大小，而不会影响导航栏的高度。请注意下面两张图片的区别：

enter image description here enter image description here

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

这是导航栏的有效范例https://codepen.io/DohaHelmy/pen/xxbzzRN

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

-1
投票

不确定在此使用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;
}
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.