时间戳

首页 > 解决方案 > html/css 窗口大小调整问题

html - html/css 窗口大小调整问题

问题描述

所以我对 HTML 和 CSS 以及一般的编码（C# 和 C++）相当陌生，我在网站上工作只是为了好玩。我大部分时间都在学习，并且我为我迄今为止所拥有的东西感到自豪，即使它并不多。但是我有一个问题，每当我在我的笔记本电脑上打开网站时，它的屏幕比我的 PC 小，或者每当我调整浏览器的大小时，整个页面都会乱七八糟，文字相互重叠，背景图像更小，有空白在周围。我搜索了很多，似乎每个人都有一个独特的解决方法，但没有一个对我有用。这是我的代码：

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%;
}

标签： htmlcss

解决方案

您可以使用媒体查询来为较小的屏幕设计您的网站。例如，您可以定义仅在视口宽度小于 x 时才适用的 CSS。

此示例将宽度小于 400 像素的视口的字体大小设置为 9pt：

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

推荐阅读