Question

我正在练习html和css，想要建立一个网站，但文字缩放不正确。

HTML

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Website</title>
        <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
        <link href="style.css" rel="stylesheet" text="text/css">

      </head>
      <body>
        <div id="huge"></div>
        <div class="navbar">

          <div id="navbar-background"></div>

          <div id="home-div">
            <p id="home-text">Home</p>
          </div>

          <div id="home-div-button"></div>


        </div>
      </body>
    </html>

的CSS：

body {
      background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
      background-repeat: no-repeat;
      background-size: cover;
    }

    html, body {
      height: 100%;
    }

    #huge {
      width: 85.8%;
      height: 100%;
      position: relative;
      background-color: rgba(255, 103, 48, 0.5);
      left: 7%;
    }

    .navbar div, .navbar div p {
      position: fixed;
    }

    #navbar-background {
      width: 77.5%;
      height: 22.5%;
      border-radius: 70px;
      top: 2.5%;
      left: 11%;
      background-color: rgba(255,255,255, .2);
      z-index: 1
    }

    #home-div {
      background-color: rgb(249, 162, 100);
      width: 19.5%;
      height: 12%;
      border-radius: 30px;
      color: #FFFFFF;
      position: fixed;
      left: 12%;
      top: 6%;
      z-index: 2;
      border-top: 1px white solid;
      border-left: 1px solid white
    }

    #home-div-button {
      background-color: rgb(200, 131, 78);
      width: 20%;
      height: 12%;
      border-radius: 30px;
      z-index: 1;
      top: 8%;
      left: 12.5%;
      position: fixed;
    }

    #home-text {
      font-size: 3.3em;
      font-family: Comfortaa;
      text-align: center;
      line-height: 1.3em;
      top: 2.3%;
      left: 13%;
    }

当我调整浏览器的大小时，除了文本之外，所有内容都会缩放，而文本会从按钮位于其上方开始。

我无法在任何地方找到一个简单的答案。我所需要的只是一种技术，我可以重复其他情况，使文本与其他所有内容一起扩展。

body { background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); background-repeat: no-repeat; background-size: cover; } html, body { height: 100%; } #huge { width: 85.8%; height: 100%; position: relative; background-color: rgba(255, 103, 48, 0.5); left: 7%; } .navbar div, .navbar div p { position: fixed; } #navbar-background { width: 77.5%; height: 22.5%; border-radius: 70px; top: 2.5%; left: 11%; background-color: rgba(255,255,255, .2); z-index: 1 } #home-div { background-color: rgb(249, 162, 100); width: 19.5%; height: 12%; border-radius: 30px; color: #FFFFFF; position: fixed; left: 12%; top: 6%; z-index: 2; border-top: 1px white solid; border-left: 1px solid white } #home-div-button { background-color: rgb(200, 131, 78); width: 20%; height: 12%; border-radius: 30px; z-index: 1; top: 8%; left: 12.5%; position: fixed; } #home-text { font-size: 3.3em; font-family: Comfortaa; text-align: center; line-height: 1.3em; top: 2.3%; left: 13%; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link href="style.css" rel="stylesheet" text="text/css"> </head> <body> <div id="huge"></div> <div class="navbar"> <div id="navbar-background"></div> <div id="home-div"> <p id="home-text">Home</p> </div> <div id="home-div-button"></div> </div> </body> </html>

如果您将代码段放到整页，则文本将位于正确的位置。

文字缩放不正确

0 个答案: