有人可以告诉我如何使我的网站适合更大的屏幕尺寸吗？ 1920x1080

Question

所以我刚刚决定申请一些初级职位，只是意识到我的投资组合网站在更大的屏幕尺寸上无法运行，因为它看起来太长了。

在申请了很多工作之后，有人可以建议我可以做些什么来解决它吗？ 我应该使用媒体查询吗？

我是在笔记本电脑上构建它的，所以很难看到它在大屏幕上的样子。 任何帮助将不胜感激！

这是我的标题代码：

$header-color: rgb(31 33 34 / 95%);
$primary-color: rgba(12, 12, 12, 0.95);
$secondary-color: rgb(60 255 255);
$base-color: #fafafa;
$heading: 3rem;
$sub-heading: 2rem;
$font-size: .9rem;
$font-color: #fff;

// Dark Mode

#light .nav-bar {
    background-color: rgb(192, 165, 165);
}

#light .home {
    background-color: rgb(218, 186, 186);
}

#light .home h1 {
    color: rgb(27, 26, 26);
}

#light .home .word {
    color: rgb(241 60 152);
}

#light .about {
    background-color: rgb(218, 186, 186);
}

#light .projects-container {
    background-color: rgb(218, 186, 186);
}
#light .contact {
    background-color: rgb(218, 186, 186);
}
#light .description {
    color: rgb(0, 0, 0);
}
#light .lang-name {
    color: rgb(0, 0, 0);
}
#light h2 {
    color: $primary-color;
}
#light .heading {
    background-color: rgb(218, 186, 186);
}
#light h3 {
    color: black;
}
#light p {
    color: black;
}
#light a {
    color: black;
}
#light .nav-item-resume a {
    color: yellow;
}

#dark {
    background-color: $primary-color;
}


.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 100vw;
    min-height: 4rem;
    background-color: rgb(144, 187, 187);
    background-color: $header-color;
    backdrop-filter: blur(8px);
    position: fixed;
    z-index: 1000;
}

.navigation {
    display: flex;
    gap: 20px;
    margin-right: 40px;
}

a {
    list-style: none;
    color: $base-color;
    font-size: $font-size;
    text-decoration: none;
}


a:hover {
    cursor: pointer;
    color: $secondary-color;
    transition: .2s ease-in-out;
}

.switch {
    padding-left: .2rem;
    display: flex;
    justify-content: center;
    align-items: center;
   gap: .2rem;

    label {
        color: white;
    }
    font-size: .5rem;
    font-style: italic;
}

.nav-item-resume a {
    color: yellow;
}

// Breakpoints

// 500 - 400px

@media screen and (max-width: 500px) {
    a {
        list-style: none;
        color: $base-color;
        font-size: .7rem;
        text-decoration: none;
    }

    label {
        color: white;
        font-size: .5rem;
    }

    .home h1 {
        font-size: 1rem;
    }

    .lrgbtn-container {

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 10vh;
    
        button {
            min-width: 200px;
            min-height: 50px;
            border: none;
            background-color: rgba(26, 25, 25, 0.95);
            color: #fff;
            border-radius: 4px;
            transition: ease-in-out 0.3s;
            font-size: 1rem;
            outline: none;
            border: 3px solid rgb(83, 235, 235);
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
    }

    .description {
        padding: 20px 0;
        font-size: .7rem;
        color: $font-color;
        max-width: 50%;
        text-align: start;
        line-height: 1.5;
    }

    .skills-name img {
        width: 60px;
        height: 60px;
    }
    
    h2 {
        position: relative;
        font-size: 2rem;
        color: rgb(60, 255, 255);
    }

    .smlbtn-container {

        button {
            width: 80px;
            height: 40px;
            border: none;
            color: white;
            background-color: rgba(26, 25, 25, 0.95);
            border: 3px solid rgb(83, 235, 235);
            border-radius: 4px;
            box-shadow: inset 0 0 0 0 rgb(144, 187, 187);
            transition: ease-in-out 0.3s;
            font-size: .8rem;
            outline: none;
        }
    } 

    .contact-msg {
        padding: 50px;
        font-size: 0.7rem;
    }

    .navigation {
        display: flex;
        gap: 10px;
    }

    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 100vw;
        min-height: 4rem;
        background-color: rgb(144, 187, 187);
        background-color: $header-color;
        backdrop-filter: blur(8px);
        position: fixed;
        z-index: 1000;
        gap: 3rem;
    }

    .skills-name img {
        width: 40px;
        height: 40px;
    }

    .skills-name {
        font-size: small;
    }




  }

  // 1000px

@media screen and (max-width: 1000px) {
    p {
        font-size: .8rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

  // 850px

@media screen and (max-width: 850px) {
    .projects-container {
        max-width: 100vw;
        min-height: 50vh;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding: 50px;
    }

    .project-desc {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 1rem;
    }

    .projects div {
        flex: 0; 
    }
}

<div className='navigation'>
            <div className='nav-item'><Link to='home'smooth={true} offset={100} duration={500}>Home</Link></div>
            <div className='nav-item'><Link to='about'smooth={true} offset={20} duration={500}>About</Link></div>
            <div className='nav-item'><Link to='projects' smooth={true} offset={0} duration={500}>Projects</Link></div>
            <div className='nav-item'><Link to='contact' smooth={true} offset={100} duration={500}>Contact</Link></div>
            <div className='nav-item-resume'><a href={Resume} download>Resume</a></div>
        </div>

Answer 1

你绝对应该为更大的屏幕使用媒体查询。 今天前端开发的基本规则应该是通过移动优先设计来开发网站。所以你的 CSS 文件应该是移动优先的，然后媒体查询应该为所有更大的屏幕使用最小宽度而不是最大宽度。如果您使用的是 React，您还可以查看 React-responsive 包。

此外，您还可以使用 Chrome 的设备工具栏 (CTRL + Shift + M) 轻松查看您的网站在不同分辨率下的外观。您可以在那里输入不同的分辨率并覆盖/检查整个幽灵。