1. 首页
  2. 问题列表
  3. 简单的HTML页面无法响应
提问者：小点点

简单的HTML页面无法响应


我已经用简单的HTML和CSS构建了一个网页，目前只有标题。我已经确保只使用px单元来指定根字体大小，其余的使用rem单元，但是页面没有响应。当窗口按比例缩小时，字体保持不变。

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: "Lato", sans-serif; 
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 3rem;
}

.text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); 
  text-align: center;
}

.header {
  height: 95vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(126, 213, 111, 0.8),
      rgba(40, 180, 133, 0.8)
    ),
    url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 75vh,
    0 100%
  ); 
  position: relative;
}

.logo-box {
  position: absolute;
  top: 4rem;
  left: 4rem;
}

.logo {
  height: 3.5rem;
}

.text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  backface-visibility: hidden;
  margin-bottom: 6rem;
}

.heading-primary-main {
  display: block;
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 3.5rem;
  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-in;
}

.heading-primary-sub {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1.75rem;
  animation: moveInRight 1s ease-in;

}

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="css/icon-font.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!-- tab icon -->
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />

    <title>Natours | Exciting tours for adventurous people</title>
  </head>
  <body>
    <header class="header">
      <div class="logo-box">
        <img class="logo" src="img/logo-white.png" alt="logo" />
      </div>
      <div class="text-box">
        <h1 class="heading-primary">
          <span class="heading-primary-main">Outdoors</span>
          <span class="heading-primary-sub">is where life happends</span>
        </h1>
        <a href="#" class="btn btn-white btn-animated">Discover out tours</a>
      </div>
    </header>
  </body>
</html>

有人看到我在哪里搞砸了吗？浏览器:Chrome


共1个答案

匿名用户

我建议您从CSS调用字体，这样您只在需要的时候使用它。

另一个建议是在css中使用端点，当您想要更改字体时，请使用！migrator

https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries

相关问题