Question

因此，对于HTML和CSS以及一般的编码（C＃和C ++）来说，我还是一个陌生的人，我一直在网站上玩耍。我已经学到了很多东西，尽管到目前为止还算不上什么，但我为自己到目前为止所取得的成就感到骄傲。但是我有一个问题，每当我在笔记本电脑上打开比计算机小的屏幕的网站时，或者每当我调整浏览器的大小时，整个页面就会混乱，文本彼此重叠，背景图像变小，带有空白在周围。我进行了很多搜索，似乎每个人都对此进行了独特的修复，但没有一个对我有用。这是我的代码：

HTML：

<!doctype html>
<html>
    <head>
        <title>Trendy</title>
        <link rel="icon" type="image/png" href="Images/TitleIcon.png" />
        <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
    </head>
<body>
    <div class="container">

        <h1 class="index-h1">Trendy</h1>

        <nav>
            <ul>
                <li><a href="#">SIGN UP</a></li>
                <li><a href="#">LOG IN</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>

    </div>
</body>

</html>

CSS：

html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    background: url(Images/BFG.png);
    background-position: top;
    background-repeat: no-repeat;
    display: block;
}

.index-h1 {
    color: #fff;
    font-family: "Broadway Flat";
    font-size: 100px;
    position: absolute;
    left: 70px;
    top: -30px;
}

.container {
    width: 80%;
    margin: 0 auto;
}

nav {
    position: absolute;
    left: 60%;
    top: 5%;
}

nav ul {
    list-style: none;
}

nav ul li {
    list-style: none;
    display: inline-block;
    color: #fff;
    font-family: "Broadway Flat";
    font-size: 30px;
    padding: 10px 50px;

    position: relative;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    color: #e02626;
}

nav a::before {
    content: '';
    display: block;
    height: 5px;
    width: 100%;
    background-color: #e02626;

    position: relative;
    top: 0;
    width: 0%;

    transition: all ease-in-out 150ms;
}

nav a:hover::before {
    width: 100%;
}

Answer 1

您可以使用media queries设计用于较小屏幕的网站。例如，您可以定义仅在视口宽度小于x时适用的CSS。

此示例针对小于400px的视口将字体大小设置为9pt：

@media (max-width: 400px) {
  body {
    font-size: 9pt;
  }
}

Answer 2

我不确定应该是什么样子，但我认为您只需要提供一些响应性代码，如下所示：

@media only screen and (max-width: 800px) {
   h1.index-h1 {
   max-width: 55%;
   overflow: hidden;
   }
}

通常，尽可能避免绝对定位是一个好主意。您可以在导航栏上使用浮点数，而不用使用它，当空间用完时，它将推到下一行。或者，您可以使用上面的响应代码将其更改为在小型设备上不浮动，而在显示的块上浮动。

如果您立即使用绝对定位，请考虑您在代码中所说的。您在导航栏上放置了左：60％，这意味着您知道它左侧的60％区域将为空白。因此，标题的最大宽度应为60％（对于某些填充，应少一些），并随着显示器尺寸的缩小而缩小一点。

总的来说，我想说的是重新考虑您对绝对位置的决定，那里的许多答案将对您来说更加普遍。

Answer 3

经过大量的试验和错误，我意识到文本很好，并且背景是浏览器无法缩放的问题，因此我设法通过以下方式对其进行了修复：

body {
    background-image: url(Images/BFG.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

Answer 4

我在学习HTML和CSS时，也很难特别地定位。使用此链接的媒体查询对我有什么帮助。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

尝试使用它。并确保您首先开始使用移动设备。如果您使用的是Google Chrome浏览器，请检查开发工具，然后在左上方的切换设备上调整屏幕尺寸，这将对您有所帮助。然后确保您的媒体查询是从最小宽度开始的，因为您是从移动屏幕开始的。

html / css窗口大小调整问题

4 个答案: