我正试着做一个具有响应性设计的作品集。 我想做一个标题栏，占据所有的屏幕，然后滚动到内容。 我已经使用网格，调整和对齐内容（并使用一些填充）。 它是响应性的，但如果一个缩放足够，标题下降并离开屏幕视图。 我想知道是否有人能帮我。 我想让它在缩放时保持在中心。 我分享我写的东西。 祝你们今天愉快。
null
*{
padding:0px;
margin: 0px;
font-weight: lighter;
box-sizing: border-box;
font-family: helvetica, Arial, Sans-serif;
}
/*-------------------HEADER AND MENU BAR----------------------*/
body{
background:white;
}
#Title{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(20px, 3fr 1fr);
padding: 0px;
max-width: auto;
text-align: center;
color:whitesmoke;
background-image: linear-gradient( to right, #9E0086,#FF5E00);
}
#Title > h1{
padding: 400px 0px 400px 0px;
letter-spacing: 5px;
grid-column: 2/3;
font-size: 25px;
align-items: center;
justify-items: center;
}
#Title > img{
grid-column: 2/3;
max-height: 100px;
text-align: center;
margin: auto;
}
/*------------------SECTION AND ARTICLES------------------*/<DOCTYPE! html>
<html>
<head>
<meta name="MyPortfolio" content="MyPortfolio">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Portfoliostyle.css">
</head>
<div>
<body>
<div >
<header id="Title">
<h1>
MY PORTFOLIO
</h1>
<img src="arrow.svg" alt="arrow">
</header>
</div>
</body>
</div>
</html> null
增加了全屏和使用vw和vh的全高和全宽。
希望这有帮助
null
*{
padding:0px;
margin: 0px;
font-weight: lighter;
box-sizing: border-box;
font-family: helvetica, Arial, Sans-serif;
}
/*-------------------HEADER AND MENU BAR----------------------*/
body{
background:white;
}
#Title{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(20px, 3fr 1fr);
padding: 0px;
width: 100vw;
height : 100vh;
text-align: center;
color:whitesmoke;
background-image: linear-gradient( to right, #9E0086,#FF5E00);
}
#Title > h1{
letter-spacing: 5px;
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
}
#Title > img{
grid-column: 2/3;
max-height: 100px;
text-align: center;
margin: auto;
} <DOCTYPE! html>
<html>
<head>
<meta name="MyPortfolio" content="MyPortfolio">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Portfoliostyle.css">
</head>
<div>
<body>
<div >
<header id="Title">
<h1>
MY PORTFOLIO
</h1>
<img src="arrow.svg" alt="arrow">
</header>
</div>
</body>
</div>
</html> 