文章/答案/技术大牛

发布

社区首页 >问答首页 >根据屏幕大小调整按钮高度

问根据屏幕大小调整按钮高度
EN

Stack Overflow用户

提问于 2020-02-27 15:24:36

回答 1查看 2.3K关注 0票数 0

我正在玩的页面设计上的一个按钮不会根据定义的屏幕宽度调整大小。它适用于较小的屏幕，但不适用于大屏幕(800 px及以上)。我只是刚开始学习，所以这可能是相当愚蠢的！共享下面的CSS代码。

Jsfiddle密码

*,
*::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>

它仍然是WIP。

cross-platform

screen-size

html

css

responsive-design

回答 1

Stack Overflow用户

发布于 2020-02-27 15:44:28

在我看来，用

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

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

从上面简单的样式来看，100 vw意味着屏幕视图高度的100%，而同样的是vw。

我希望这能帮到你

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60436534

复制

相似问题

问根据屏幕大小调整按钮高度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据屏幕大小调整按钮高度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据屏幕大小调整按钮高度
EN