移动端HTML/CSS页面适配及导航栏无法点击问题求助

初始适配疑问 #

作为网页设计新手，开发项目首页时未考虑竖屏设备适配，完成后通过Chrome开发者工具查看移动端效果很差。纠结是使用@media查询修改移动端CSS，还是重新编写全部CSS，希望得到建议和技巧。

后续补充问题 #

感谢大家的建议，我决定采用@media查询而非重写CSS，但遇到新问题：页面底部的导航栏无法点击，排查发现是#titolo-2元素占据整行遮挡了导航栏，虽然该元素没有内边距，但#titolo-1显示正常，求解决建议。

代码示例 #

HTML代码

<!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>

CSS代码

*{
    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;
}

JavaScript代码

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);
});

内容的提问来源于stack exchange，提问作者Francesco Muntoni