我正在玩的页面设计中的按钮不会根据定义的屏幕宽度调整大小。它适用于较小的屏幕，但不适用于较大的屏幕(800像素及以上(。我才刚刚开始，边走边学，所以这可能相当愚蠢！正在共享下面的CSS代码。
Jsfidle 上的代码
*,
*::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>附言：它仍然是在制品。
在我看来，使用
.yourButton {
height: 100vh;
width: 100vw;
}
使用vh获得屏幕视图高度，使用vw获取视图宽度
从上面的简单风格来看，100vh意味着屏幕视图高度的100%，vw 也是如此
我希望这能帮助