我在编写新项目的主页时没有考虑它如何在垂直设备上。现在我刚刚完成了该页面，我尝试在 chrome 检查中使用不同的设备查看它，但结果并不好。我的问题是，我对整个网络设计世界还很陌生，我应该只用@media改变移动CSS吗？还是应该从整个CSS开始？ 我会留下我的代码。 欢迎任何提示或建议，谢谢。
<!DOCTYPE html>
<html class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css">
</head>
<body>
<section class="section" id="pablitoshotit">
<div class="home-container">
<div class="home-background" style="background-image: url('imgs/home-type-3-1.JPG');"></div>
<div class="home-content">
<p class="contacts"><a class="contacts-link" href="#contacts">CONTACTS</a></p>
<h1 class="titolo" id="titolo-1">
PABLITO
</h1>
<h1 class="titolo" id="titolo-2">SHOT IT</h1>
</div>
<div class="hero">
<nav>
<ul>
<li><a class="nav-link" href="#streetphotography">STREET PH</a></li>
<li><a class="nav-link" href="#artists">ARTISTS</a></li>
<li><a class="nav-link" href="#rideout">RIDE OUT</a></li>
<li><a class="nav-link" href="#live">LIVE</a></li>
<li><a class="nav-link" href="#about">ABOUT</a></li>
</ul>
</nav>
</div>
</div>
</section>
<script src="home.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
height: 100%;
}
html, body{
overflow: hidden;
}
body{
background-color: black;
}
.home-container{
position: relative;
width: 100%;
height: 100%;
}
.home-background{
position: absolute;
top: 10%;
left: 0;
width: 100%;
height: 80%;
background-color: black;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: -1;
}
.home-content{
position: relative;
z-index: 1;
text-align: center;
padding-top: 15%;
}
.contacts{
position: absolute;
top: 15px;
right: 15px;
}
.contacts-link{
font-size: 12px;
color: #fff;
text-decoration: none;
}
.titolo{
font-size: 100px;
letter-spacing: 15px;
color: #fff;
}
#titolo-1{
margin-left: -800px;
margin-top: -150px;
}
#titolo-2{
margin-right: -800px;
margin-top: -250px;
}
.hero{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(12,3,51,0.3),rgba(12,3,51,0.3));
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
}
nav{
width: 100%;
position: absolute;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -500px;
margin-left: -200px;
}
nav ul{
list-style: none;
display: inline-flex;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 20px;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 12px;
}
document.addEventListener('DOMContentLoaded', function (){
const images = ['imgs/home-type-3-1.jpg', 'imgs/home-type-3-2.jpg', 'imgs/home-type-3-3.jpg', 'imgs/home-type-3-4.jpg', 'imgs/home-type-3-5.jpg', 'imgs/home-type-3-6.jpg', 'imgs/home-type-3-7.jpg', 'imgs/home-type-3-8.jpg', 'imgs/home-type-3-9.jpg', 'imgs/home-type-3-10.jpg'];
const homebackground = document.querySelector('.home-background');
let index = 1;
const imageObjects = [];
images.forEach(function(imageSrc) {
const img = new Image();
img.src = imageSrc;
imageObjects.push(img);
});
function changeBackground(){
homebackground.style.backgroundImage = `url('${images[index]}')`;
index = (index+1) % images.length;
}
setInterval(changeBackground, 2000);
});
您可以开始为标准分辨率（移动设备、平板电脑和网页）添加断点并调整每个分辨率的样式。
代码最终可能会有点脏，但只要它有效，练习会让你进步。