修復 CSS 手機寬度問題

Question

 * { margin: 0; padding: 0; box-sizing: border-box; } @import "variables"; @import "utilities"; body { color: $neutral; font-family: "Open Sans", sans-serif; background-color: $main-bg; } a { color: $cyan; text-decoration: none; } ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: "Raleway", sans-serif; } p { font-family: "Raleway", sans-serif; } #header { grid-area: heading; height: 100vh; background-color: $intro-email; position: relative; background-image: $bg-image; background-size: contain; background-repeat: no-repeat; background-position: left bottom; // &::before { // content: ""; // background-image: $bg-image; // position: absolute; // width: 100%; // background-size: contain; // background-repeat: no-repeat; // background-position: left bottom; // }.navbar { grid-area: heading; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6rem; .nav-list { display: flex; li { padding: 1rem 1.2rem; text-transform: uppercase; a { text-decoration: none; color: #fff; text-transform: uppercase; border-bottom: 3px transparent solid; padding-bottom: 0.5rem; transition: border-color 0.5s; font-size: 0.8rem; font-weight: 400; font-family: "Raleway", sans-serif; &:hover { border-color: #fff; } &.current { border-color: #fff; } } } } }.header-content { max-width: 100%; margin: 20px auto; text-align: center; width: 600px; img { max-width: 90%; margin-top: -50px; } } } Variabes for CSS $intro-email: hsl(217, 28%, 15%); $main-bg: hsl(218, 28%, 13%); $footer-bg: hsl(216, 53%, 9%); $testimonial-bg: hsl(219, 30%, 18%); $neutral: hsl(0, 0%, 100%); $cyan: hsl(176, 68%, 64%); $blue: hsl(198, 60%, 50%); $website-width: 1440px; $bg-image: url("../img/bg-curvy-desktop.svg"); Container.container { width: $website-width; max-width: 100%; padding: 2rem; margin: 0 auto; overflow: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" /> <header id="header"> <div class="container"> <div class="wrapper"> <nav class="navbar"> <img src="../dist/img/logo.svg" alt="" /> <ul class="nav-list"> <li><a href="#" class="current">Features</a></li> <li><a href="#">Team</a></li> <li><a href="#">SignIn</a></li> </ul> </nav> <div class="header-content"> <img src="../dist/img/illustration-intro.png" alt="" /> <h1 class="title"> All your files in one secue location, accessible anywhere </h1> <p class="text"> Flyo stores all your most important files in one secure location. Access them whenever you need, share and collaborate with friends, family and co-workers </p> <button class="btn-main">Get Started</button> </div> </div> </div>[Image showing what is happening in my code][1] </header>

網站寬度設置為 1440 像素，但每當我在屏幕上移動到移動版本時，網站的寬度永遠不會相同，網站的某些元素開始與網站不符，有沒有辦法解決這個問題或我應該刪除我嵌套元素的容器，因為這是設計的網站寬度

Answer 1

對於您的容器，請考慮使用響應式寬度，例如width: 100vw （即視口/窗口寬度的 100%）。 或者，如果你真的想堅持使用1440px ，你可以使用媒體查詢。

媒體查詢有助於將不同的 CSS 規則應用於不同的設備屏幕尺寸，作為一個虛擬示例：

@media(max-width: 599px) {
    .container {
        /* Your styling for mobile phones */
    }
}

@media(min-width: 600px) {
    /* Your styling for desktops */
}