Question

我正在播放的页面设计上的按钮不会根据定义的屏幕宽度调整大小。它适用于较小的屏幕，但不适用于较大的屏幕（800像素及以上）。我只是刚开始学习，所以我可能会很愚蠢！在下面共享CSS代码。

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*Custom properties, update if necessary*/

:root {
  --ff-primary: 'Source Sans Pro', sans-serif;
  --ff-secondary: 'Source Code Pro', monospace;

  --fw-reg: 300;
  --fw-bold: 900;

  --clr-white: #fff;
  --clr-grey: #303030;
  --clr-blue: #16E0BD;

  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;

  --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
    0.125em 0.125 0.25em rgba(0, 0, 0, 0.15);
}

@media (min-width: 800px) {
  :root {
    --fs-h1: 4.5rem;
    --fs-h2: 3.75rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.125rem;
  }
}

/*General Styles*/


body {
  background: var(--clr-white);
  color: var(--clr-grey);
  margin: 0;
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  line-height: 1.6;

}

section {
  padding: 5em 2em;
}

img {
  display: block;
  max-width: 100%;

}

strong {
  font-weight: var(--fw-bold)
}

:focus {
  outline: 3px solid var(--clr-blue);
  outline-offset: 3px;
}

/* Buttons */

.btn {
  display: inline-block;
  padding: .5em 2.5em;
  background: var(--clr-blue);
  color: var(--clr-grey);
  text-decoration: none;
  cursor: pointer;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: var(--fw-bold);
  transition: transform 200ms ease-in-out;
}

.btn:hover {
  transform: scale(1.1);
}

/*Typography*/

h1,
h2,
h3 {
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: var(--fs-h1)
}

h2 {
  font-size: var(--fs-h2)
}

h3 {
  font-size: var(--fs-h3)
}

.section__title {
  margin-bottom: 0.25em;

}

.section__title--intro {
  font-weight: var(--fw-reg);
}

.section__title--intro strong {
  display: block;
}

.section__subtitle {
  margin: 0;
  font-size: var(--fs-h3);

}

.section__subtitle--intro,
.section__subtitle--about {
  background: var(--clr-blue);
  padding: .25em;
  font-family: var(--ff-secondary);
  margin-bottom: 1em;
}

/* Header section */

nav {
  display: none;
}

/* Intro section */

.intro {
  position: relative;

}

.intro__img {
  box-shadow: var(--bs);
}

.section__subtitle--intro {
  display: inline-block;
}

@media (min-width: 600px) {
  .intro {
    display: grid;
    width: min-content;
    margin: 0 auto;
    grid-column-gap: 1em;
    grid-template-areas:
      "img title"
      "img subtitle";
    grid-template-columns: min-content max-content;
  }

  .intro__img {
    grid-area: img;
    min-width: 250px;
    position: relative;
    z-index: 2;
  }

  .section__subtitle--intro {
    align-self: start;
    grid-column: -1 / 1;
    grid-row: 2;
    text-align: right;
    position: relative;
    left: -1.5em;
    width: calc(100% + 1.5em);
  }
}

/*My services section*/

.myservices {
  background-color: var(--clr-grey);
  color: var(--clr-white);
  background-size: cover;
  background-image: url("https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/computer-desk-1450x625.jpg");
  background-blend-mode: multiply;
  text-align: center;
}

.section__title--services {
  color: var(--clr-blue);
  position: relative;
}

.section__title--services::after {
  content: '';
  display: block;
  width: 3em;
  height: 1px;
  margin: 0.5em auto 1em;
  background: var(--clr-white);
  opacity: 0.5;
}

.services {
  margin-bottom: 4em;
}

.service {
  max-width: 250px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .services {
    display: flex;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  .service+.service {
    margin-left: 1.5em;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>Tanuj Lakhina's Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="CSS/style.css">
  </head>

  <body>
    <header>
      <div class="logo">
        <img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/logo.png" alt="">
      </div>
      <button class="nav-toggle" aria-label="toggle navigation">
        <span class="hamburger"></span>
      </button>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
          <li class="nav__item"><a href="#services" class="nav__link">My services</a></li>
          <li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
          <li class="nav__item"><a href="#work" class="nav__link">My work</a></li>
        </ul>
      </nav>
    </header>
    <!-- INTRODUCTION -->
    <section class="intro" id="home">
      <h1 class="section__title section__title--intro">
        Hi, I am <strong>Tanuj Lakhina</strong>
      </h1>
      <p class="section__subtitle section__subtitle--intro">journalist</p>
      <img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/me-313x313.jpg" alt="picture of Tanuj Lakhina" class="intro__img">
    </section>


    <!-- My services -->
    <section class="myservices" id="services">
      <h2 class="section__title section__title--services">What I do</h2>
      <div class="services">
        <div class="service">
          <h3>Journalism</h3>
          <p>Professional sports journalist with Firstpost (Network18) in Delhi with strong experience of working in digital newsrooms.</p>
        </div><!-- / service -->
        <div class="services">
          <div class="service">
            <h3>Social media</h3>
            <p>Have worked in B2B and B2C environments for businesses, agency and analytical organisations. I've handled accounts of large entities with over a million customers.</p>
          </div><!-- / service -->
          <div class="service">
            <h3>Data journalism</h3>
            <p>Besides the run of the mill stories, I've put special emphasis on data stories and work to offer different perspective to a topic.</p>
          </div><!-- / service -->
        </div><!-- / services -->
        <a href="#work" class="btn">My work</a>
        </section>

    <!-- About me -->
    <section class="about-me" id="about">
      <h2 class="section__title section__title--about">Who I am?</h2>
      <p class="section__subtitle section__subtitle--about">Journalist, social media enthusiast</p>

      <div class="about-me__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nunc consequat interdum varius sit amet. </p>
        <p>Morbi tristique senectus et netus et malesuada fames. Morbi quis commodo odio aenean. Et leo duis ut diam quam nulla porttitor massa id. Venenatis lectus magna fringilla urna porttitor rhoncus. Suspendisse potenti nullam ac tortor vitae.</p>
      </div>

      <img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/IMG-20190323-WA0037-244X406.jpg" alt="About me">
      <!-- INSERT ABOUT ME PHOTO ABOVE -->
    </section>

    <!-- My work -->
    <section class="my-work" id="work">
      <h2 class="section__title">My work</h2>
      <p class="section__subtitle"></p>

      <div class="Portfolio">
        <!-- Portfolio item 1 -->
        <a href="#" class="Portfolio__item">
          <img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/black-ball-point-pen-with-brown-spiral-notebook-240x240.jpg" alt="" class="portfolio__img"></a>
        <!-- Portfolio item 2 -->
        <a href="#" class="Portfolio__item">
          <img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/data-analysis-240x240.jpg" alt="" class="portfolio__img"></a>
        <!-- Portfolio item 3 -->
        <a href="#" class="Portfolio__item">
          <img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/newspaper-illustration-240x240.png" alt="" class="portfolio__img"></a>
      </div>
    </section>

    <!-- FOOTER -->
    <footer>
      <a href="mailto:tanujlakhina9@gmail.com" class="footer__link">Tanujlakhina9@gmail.com</a>
      <ul class="social-list">
      <li class="social-list__item"><a class="social-list__link" href="https://twitter.com/tanujlakhina"><i class="fa fa-twitter-square" style="font-size:36px"></i></a></li></ul></i>
        <li class="social-list__item"><a class="social-list__link" href="https://www.facebook.com/tanujlakhina"><i class="fa fa-facebook-official" style="font-size:36px"></a></li></i>
      </ul>
    </footer>
  </body>

</html>

P.S。仍然是在制品。

Answer 1

我认为使用

.yourButton {
    height: 100vh;
    width: 100vw;
}

使用 vh 获取屏幕视图高度，使用 vw 获取屏幕宽度

从上面的简单样式来看，100vh表示屏幕视图高度的100％，而vw则相同。

我希望这会有所帮助

根据屏幕尺寸调整按钮高度

1 个答案: