每当我使浏览器变小时，标头就不会随着浏览器而缩小，我已经使用百分比使它响应，但是它仍然无法正常工作。我是否正确使用了百分比，或者应该改用分数？我还希望使其他元素具有响应性，例如页脚和介绍div。
/*
font-family: 'Anton', sans-serif; -----------------BOLD
font-family: 'Fjalla One', sans-serif; ------------REGULAR
*/
*{
margin: 0;
}
body{
background: black;
}
.logo{
font-size: 40px;
font-family: 'Anton', sans-serif;
color: #ffc800;
line-height: 100px;
}
.header {
grid-area: hd;
height: auto;
}
.header{
display: grid;
grid-template-columns: 36% 13% 13% 13% 13% auto;
grid-template-rows: 95px;
grid-template-areas: "hd hd hd hd hd";
font-family: 'Anton', sans-serif;;
font-size: 30px;
margin-bottom: 20px;
border-bottom: 2px solid #ffc800;
position: relative;
width: 1903px;
}
.header{
background: black;
}
.header a{
color: #ffc800;
text-decoration: none;
line-height: 100px;
}
.hme{
grid-column-start: 2;
}
.vids{
grid-column-start: 3;
}
.header a:hover {
-webkit-transition: all ease-in-out;
-moz-transition: all ease-in-out;
-ms-transition: all ease-in-out;
-o-transition: all ease-in-out;
transition: all ease-in-out;
color: transparent;
text-shadow: 0 0 1px rgba(255,255,255,0.9), 2px 0px 0px #00FFD7, -1px 0px 0px #FF0000;
padding: 0 0 0 -1px;
}
/*----------------------------------------------------------------*/
.main{
grid-area: mn;
}
.main{
display: grid;
grid-template-columns: 250px 500px 1fr 1fr;
grid-template-rows: 400px 400px;
grid-template-areas: "mn mn mn mn mn";
color: white;
margin-bottom: 50px;
position: relative;
width: 1903px;
}
video{
background: url(./clientback3);
overflow: auto;
}
.others{
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 100px;
line-height: 700px;
z-index: 2;
grid-column-start: 2;
grid-column-end: 4;
min-width: 646.5px;
}
.artnam{
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 50px;
grid-column-start: 2;
grid-column-end: 4;
z-index: 1;
min-width: 615.5px;
}
.mnvid:hover{
autoplay: 1;
}
/*-------------------------------------------------------------*/
.intro{
grid-area: int;
}
.intro{
display: grid;
grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;
grid-template-rows: 20px 60px 50px 250px 80px;
color: #ffc800;
background: url(./clientback3.jpg);
position: relative;
width: 1903px;
}
.vpap{
grid-column-start: 1;
grid-column-end: 17;
grid-row-start: 2;
font-family: 'Anton', sans-serif;
font-size: 50px;
text-align: center;
text-decoration-style: underline;
padding-bottom: 20px;
}
.abtinf{
font-family: 'Fjalla One', sans-serif;
grid-row-start: 4;
grid-column-start: 2;
grid-column-end: 15;
font-size: 25px;
}
/*-----------------------------------------------------------*/
.recproc{
grid-area: rcp;
}
.recproc{
display: grid;
grid-template-columns: 250px 360px 360px 360px 360px;
grid-column-gap: 50px;
grid-template-rows: auto auto auto;
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 25px;
background-image: url(projback.jpg);
position: relative;
width: 1903px;
}
.projtitle{
grid-column-start: 3;
text-align: center;
margin-bottom: 20px;
color: #ffc800;
font-family: 'Anton', sans-serif;
}
.firstvid{
grid-column-start: 2;
margin-bottom: 50px;
}
.secvid{
grid-row-start: 2;
grid-column-start: 3;
margin-bottom: 50px;
}
.thrdvid{
grid-row-start: 2;
grid-column-start: 4;
margin-bottom: 50px;
}
.frthvid{
grid-row-start: 3;
grid-column-start: 2;
margin-bottom: 50px;
}
.fthvid{
grid-row-start: 3;
grid-column-start: 3;
margin-bottom: 50px;
}
.sthvid{
grid-row-start: 3;
grid-column-start: 4;
margin-bottom: 50px;
}
/*---------------------------------------------*/
.wyus{
display: grid;
grid-template-columns: 300px 150px 250px 250px 250px 250px;
grid-template-rows: auto auto auto auto 75px;
background: url(./clientback3.jpg);
font-family: 'Anton', sans-serif;
color: #ffc800;
position: relative;
width: 1903px;
}
.whyustit{
grid-column-start: 2;
padding-top: 50px;
font-size: 50px;
padding-bottom: 25px;
}
.whyusinfop1{
grid-row-start: 2;
grid-column-start: 2;
grid-column-end: 6;
font-size: 25px;
padding-bottom: 20px;
font-family: 'Fjalla One', sans-serif;
}
.whyusinfop2{
grid-row-start: 3;
grid-column-start: 2;
grid-column-end: 6;
font-size: 25px;
padding-bottom: 35px;
font-family: 'Fjalla One', sans-serif;
}
.butcont{
grid-row-start: 4;
grid-column-start: 2;
font-size: 25px;
color: black;
text-decoration: none;
border: 2px #2a2a2a;
background: #2a2a2a;
color: white;
border-radius: 6px;
color: #ffc800;
}
.butcont:hover{
-webkit-transition: all ease-in-out;
-moz-transition: all ease-in-out;
-ms-transition: all ease-in-out;
-o-transition: all ease-in-out;
transition: all ease-in-out;
color: transparent;
text-shadow: 0 0 1px rgba(255,255,255,0.9), 2px 0px 0px #00FFD7, -1px 0px 0px #FF0000;
padding: 0 0 0 -1px;
border: 2px #ffc800;
background: #ffc800;
}
/*------------------------------------------------*/
.footer{
display: grid;
grid-template-columns: 250px 75px 250px 250px 250px 250px auto auto 1fr;
grid-template-rows: 100px 60px 100px;
background: black;
color: #ffc800;
font-family: 'Anton', sans-serif;
border-top: 2px solid #ffc800;
position: absolute;
width: 1903px;
}
.follow{
grid-column-start: 2;
margin-top: 25px;
}
.instalogo{
grid-column-start: 2;
grid-row-start: 2;
height: auto;
width: 50px;
}
.insat{
grid-row-start: 2;
grid-column-start: 3;
font-size: 25px;
margin-top: 15px;
font-family: 'Fjalla One', sans-serif;
}
.devby{
grid-column-start: 7;
margin-top: 25px;
}
.jbdevlgo{
height: auto;
width: 500px;
grid-column-start: 7;
grid-column-end: 9;
grid-row-start: 2;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Murshed</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One" rel="stylesheet">
</head>
<body>
<div class="header">
<h1 class="logo">THEGREATMURSHED</h1>
<a href="./home.html" class="hme">Home</a>
<a href="./videos.html" class="vids">Videos</a>
<a href="./enquiry.html" class="enq">Enquiries</a>
<a href="./socials.html" class="schls">Socials</a>
<a href="./Photoshoots.html" class="phtos">Photoshoots</a>
</div>
<div class="main">
<video width="auto" height="800" controls="1" loop="5" autoplay="1" id="video1" allow="autoplay" muted="1">
<source src="./covervid.mp4" type="video/mp4">
</video>
<h1 class="others">GET RIGHT REMIX</h1>
<p class="artnam">Dockem & Malone ft. Ayo Beatz</p>
</div>
<div class="intro">
<h1 class="vpap">ABOUT US</h1>
<p class="abtinf">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit obcaecati quae modi amet at aperiam rerum facilis error impedit culpa. Magnam earum odio quia maxime minima, excepturi, at omnis dolorum delectus consectetur atque? Exercitationem ipsam possimus cupiditate aspernatur iure, dignissimos aperiam adipisci. Sapiente inventore quo dolorem labore quaerat ab quasi, at vel recusandae blanditiis eveniet iusto animi rem quia provident unde tempora sequi mollitia accusamus, sit vitae fuga et expedita. Non nulla pariatur numquam distinctio harum maxime doloremque est aspernatur suscipit ex, esse voluptatem. Laudantium explicabo incidunt ab, eum aperiam tenetur consequuntur odio, necessitatibus consequatur reprehenderit porro! Eius odit, possimus earum quasi architecto atque corrupti consequuntur sequi, nobis iste tempore ut rerum! Inventore adipisci, ex perspiciatis laudantium dicta natus rem eligendi, quae earum incidunt voluptates sapiente! Ipsa similique nobis unde illum sed esse earum in doloremque tenetur, fugiat fuga, facilis dolor quis accusamus, autem quasi eveniet incidunt natus consectetur ipsam.</p>
</div>
</script>
<div class="recproc">
<h1 class="projtitle">Projects</h1>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Ztt1zS1EuIE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="firstvid">
</iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/EoeEmNrYJgo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="secvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/iAMq_sXkXxA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="thrdvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Jb6huXOpkyc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="frthvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/7ha6xYSOHeQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="fthvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Atr-sLswEUE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="sthvid"></iframe>
</div>
<div class="wyus">
<h1 class="whyustit">Why Us</h1>
<p class="whyusinfop1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui perferendis aut exercitationem nobis vitae omnis totam eum vero tempore sit quod, vel porro sequi, dignissimos ut quidem maxime nulla. Praesentium placeat velit similique minima nam, quibusdam voluptates at veritatis, aliquam ratione, alias deleniti quaerat. Fuga neque reiciendis ipsa animi, vitae architecto iusto, at facere totam provident in enim aperiam quod.</p>
<p class="whyusinfop2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis laboriosam debitis non est culpa sapiente incidunt eligendi consequatur totam exercitationem harum unde minima nesciunt cumque et quod molestias voluptates animi delectus dolores quasi voluptate, blanditiis iste. Fugit omnis, harum?</p>
<a href="./enquiry.html" class="butcont">Contact Us</a>
</div>
<div class="footer">
<h1 class="follow">Follow</h1>
<img src="./instalogo.png" class="instalogo">
<p class="insat">@thegreatmurshed</p>
<h1 class="devby">Developed By</h1>
<img src="./jbdevlogo.png" class="jbdevlgo">
</div>
</body>
</html>
答案 0 :(得分：0)
如果用像素（px）定义元素的宽度，这是没有响应的，因为像素是静态度量，所以我想解释一下。
要解决此问题，可以使用%，em或rem。