响应式仅适用于开发工具，不适用于实际站点

Question

首先我想说我是网络开发新手，所以可能有一个明显的错误我无法在我的代码中捕获...我的问题是网站的响应能力仅在我'我在开发工具中尝试它，但在实际站点中，有一个部分不会与其他部分一起调整大小（实际上是第 1 部分）。这发生在 tablet.css 上，因为移动和桌面几乎可以正常工作。我开始怀疑甚至 mobile.css 也可能有这个问题，因为我不能让浏览器 window 这么小，所以我依赖开发工具。老实说，我想不通为什么……我在不同的浏览器（Brave、FF Developer Edition、Microsoft Edge）中尝试过，结果是一样的。我把我的代码留给你，我为移动设备、平板电脑和台式机使用了三个 CSS，因为我认为使用媒体查询会太复杂。 with dev tools in the site HTML:

    <!DOCTYPE html>
    <html lang="it" dir="ltr">

    <head>
      <link rel="stylesheet" href="style.css">
      <link
        href="https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;700&display=swap"
        rel="stylesheet">
      <link rel="icon" href="images/alebacce.ico">
    <link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
    <link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 957px)" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta charset="utf-8">
      <title>Bacce's Angle</title>
    </head>

    <body>
      <nav class="navflex">
        <img class="logo" src="images/alebacce.png" alt="a logo representing html tags">
        <ul class: "menu">
          <li><a href="file:///C:/Users/assas/Desktop/All/Coding/Projects/baccesangle/baccesangle.html#">Home</a></li>
          <li><a href="#chisono">Chi sono</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#interessi">Interessi</a></li>
          <li><a href="#chiamami">Contattami</a></li>
        </ul>
        <input id="hamburger" type="checkbox">
        <label for="hamburger"></label>
      </nav>

      <div class="main">
        <picture>
       <source 
          media="(min-width: 650px)"
          srcset="images/webdevlr2.png">
       <source 
          media="(max-width: 465px)"
          srcset="images/webdevlr2mobile.png">
       <img src="images/webdevlr2.png" 
       alt="Welcome on my site!">
    </picture>
        <div class="welcome">
          <p>
            <h1><strong>ALESSANDRO BACCELLI</h1></strong>
          </p>
          <p><em>Work in progress</em> WEB DEVELOPER</p>
        </div>
      </div>

    <div class="divide first">
      <div class="heading">
        <h1 id="chisono">Chi sono</h1>
      </div>
      <div class="section1">
        <div class="profile">
            <picture>
       <source 
          media="(min-width: 650px)"
          srcset="images/profiledef.png">
       <source 
          media="(max-width: 465px)"
          srcset="images/profiledefmobile.png">
        <img src="images/profiledef.png" alt="A picture of me">
    </picture>
        </div>
        <div class="biography">
          <p>Un ragazzo genovese di 24 anni, laureato in <em>Scienze della Comunicazione</em> da sempre appassionato di
            tecnologia e digitale. <br><br> Ho recentemente scoperto
            la mia passione per la programmazione grazie ai corsi di <strong><a
                href="https://www.start2impact.it/" target="blank">start2impact</a></strong>,
            iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... <br><br>
            Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
            lungo percorso.</p>
             <div class="download">
        <button><a href="https://mega.nz/file/VNpETSiI#Z93X88NF5A-YwNvlLlN1qDqH9wesivKVRnLwK7WF9Hs" target="blank">Scarica il mio CV</a></button>
      </div>
        </div>
      </div>
      </div>



      <div class="divide colordifferent">
      <div class="heading margin">
        <h1 id="skills">Skills</h1>
      </div>
      <div class="section2">
        <div class="hard">
          <h2>Hard skills</h2>
          <ul>
            <li>Inglese fluente</li>
            <li class="modifiedli">HTML</li>
            <li class="modifiedli">CSS</li>
            <li>Canva</li>
          </ul>
        </div>
        <div class="soft">
          <h2>Soft skills</h2>
          <ul>
            <li>Autonomia</li>
            <li>Fast learner</li>
            <li>Empatia</li>
            <li>Ascolto attivo</li>
          </ul>
        </div>
      </div>
      </div>

      <div class="divide">
      <div class="heading bottomodif">
        <h1 id="interessi">Interessi</h1>
      </div>
      <div class="section2">
        <div class="inte hard">
          <ul>
            <li id="programmazione">Coding</li>
            <li id="foto">Fotografia digitale</li>
            <li id="grafica">Grafica</li>
            <li id="discover">Scoprire nuove cose</li>
            <li id="cucina">Cucina</li>
            <li id="videogiochi">Video-games</li>
          </ul>
        </div>
        <div class="ressi soft">
          <ul>
            <li id="self">Self-growth</li>
            <li id="mind">Mindfulness</li>
            <li id="fit">Fitntess &amp; Health</li>
            <li id="storia"><span class="history">Storia e Antropologia</span></li>
            <li id="book">Lettura</li>
            <li id="eco">Ambiente</li>
          </ul>
        </div>
      </div>
      </div>

      <footer id="chiamami">
        <div class="foot"></div>
        <div class="foot contact"><a href="mailto:ale.baccelli@libero.it" target="_blank">E-mail</a><span class="not"><br></span><span class="bracket"> &nbsp; |&nbsp; </span><a
            href="https://www.linkedin.com/in/alessandro-baccelli1996/" target="_blank">Linkedin</a><span class="not"><br></span><span class="bracket"> &nbsp;|&nbsp; </span><a
            href="https://talent.start2impact.it/home/student_index" target="_blank">Start2impact</a><br>
          <br> ALESSANDRO BACCELLI 2020 &#169;</div>
        <div class="foot"></div>
      </footer>
    </body>

    </html>

Style.CSS（桌面）

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 16px;
        background-color: #E5DDC8;
        color: #1F1F1F;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #EBFDFF;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #B1C5E7;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #7699D4;
    }

    h1,
    h2 {
        font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
        color: #141414;
    }

    #hamburger {
        display: none;
    }

    .navflex {
        display: flex;
        background-color: #004369;
        font-size: 130%;
        color: #FFFFFF;
        width: 100%;
        height: 100px;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
    }

    .logo {
        height: 100%;
        margin-left: 150px;
    }

    nav ul {
        list-style-type: none;
        text-align: right;
        margin-right: 30px;
    }

    nav ul li {
        display: inline-block;
    }

    nav ul li a {
        display: inline-block;
        text-decoration: none;
        color: #FFFFFF;
        padding: 0px 25px;
    }

    nav a:hover {
        text-decoration: underline;
    }

    nav a:visited {
        color: #ffffff;
    }

    .main {
        display: flex;


    }

    .welcome {
        display: none;
        color: #FFFFFF;
        font-size: 3em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        text-shadow: 2px 2px 2px #1F1F1F;
    }

    .welcome h1 {
        white-space: nowrap;
        color: #ffffff;
    }

    .main img {
        width: 100%;
        position: relative;
    }

    .divide {
        height: 900px;
        margin-top: 120px;
    }

    .heading {
        font-family: "Montserrat",
            "Helvetica",
            "Arial",
            sans-serif;
        color: #141414;
        font-size: 200%;
        margin-bottom: 80px;
        text-align: center;
    }

    .section1 {
        display: flex;
        justify-content: center;
        width: 958px;
        margin: 0 auto;
    }

    .profile {
        text-align: center;
    }

    .biography {
        align-self: center;
        font-size: 140%;
        margin-left: 80px;
    }

    .biography a {
        color: #01949A;
        text-decoration: none;
    }

    .biography a:hover {
        color: #004369;
        text-decoration: underline;
    }

    .download {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .biography button {
        font-size: 130%;
        padding: 15px;
        background-color: #01949A;
        border-radius: 10px;
        border: none;
        margin-top: 40px;
    }

    .biography button a {
        color: #ffffff;
        text-decoration: none;
    }

    .biography button a:hover {
        color: #ffffff;
        text-decoration: none;
        background-color: #004369;
    }

    .biography button:hover {
        background-color: #004369;
    }

    .section2 {
        display: flex;
        margin: 0 auto;
        justify-content: space-evenly;
        font-size: 200%;

    }

    .colordifferent {
        background-color: #E5F9E0;
        padding-top: 120px;
    }

    .margin {
        margin-bottom: 145px;
    }

    .hard h2,
    .soft h2 {
        margin-bottom: 25px;

    }

    .section2 ul {
        list-style-type: none;
        margin-bottom: 140px;
    }

    .section2 li {
        margin-bottom: 25px;
        ;
    }

    .section2 ul li::before {
        content: "05";
        margin-right: 25px;
    }

    .section2 ul .modifiedli::before {
        content: "";
    }

    .section2 ul #programmazione::before {
        content: "‍";
    }

    .section2 ul #foto::before {
        content: "";
    }

    .section2 ul #grafica::before {
        content: "";
    }

    .section2 ul #discover::before {
        content: "️";
    }

    .section2 ul #cucina::before {
        content: "‍";
    }

    .section2 ul #videogiochi::before {
        content: "";
    }

    .section2 ul #self::before {
        content: "";
    }

    .section2 ul #mind::before {
        content: "‍♂️";
    }

    .section2 ul #fit::before {
        content: "";
    }

    .section2 ul #storia::before {
        content: "";
    }

    .section2 ul #book::before {
        content: "";
    }

    .section2 ul #eco::before {
        content: "♻️";
    }

    .bottomodif {
        margin-bottom: 110px;
    }

    footer {
        display: flex;
        text-align: center;
        align-items: center;
        height: 350px;
        background-color: #004369;
        color: #FFFFFF;
        font-size: 130%;
    }

    .foot {
        width: 33.33333%;
    }

    footer a {
        color: #FFFFFF;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }

    .not {
        display: none;
    }

 Mobile:

body {
    display: flex;
    flex-direction: column;
    font-size: 90%;
    width: 100%;
}

nav {
    width: 100%;
}

nav ul {
    display: none;
}

#hamburger {
    visibility: hidden;
}

label,
label::before,
label::after {

    width: 100px;
    height: 15px;
    border-radius: 5px;
    background: white;
    transition: 0.6s;
    -webkit-transition: 0.6s;
}

label {
    cursor: pointer;

}

label::before {
    content: "";
    transform: translateY(-30px);
}

label::after {
    content: "";
    transform: translateY(30px);
}

#hamburger:checked+label {
    width: 0px;
}

#hamburger:checked+label::before {
    transform: rotate(45deg) translate(0px);
}

#hamburger:checked+label::after {
    transform: rotate(-45deg) translate(0px);
}

.logo {
    margin-left: 25px;
}

.main {
    display: block;
}

.main img {
    display: block;
    min-height: 100%;
    min-width: 100%;
    position: static;
    overflow: hidden;
}

.welcome {
    display: none;
}

.divide {
    height: fit-content;
    width: 100%;
}



.section1,
.section2 {
    display: block;
    width: 100%;
    height: initial;
    overflow-y: auto;

}

.profile img {

    height: auto;
    max-width: 100%;
    margin-bottom: 20px;
}

.biography {
    display: block;
    width: 90%;
    text-align: left;
    margin-left: 5px;
    margin: 0 auto;
}

.hard,
.soft {
    text-align: center;
    margin-bottom: 80px;
}

.hard h2,
.soft h2 {
    margin-bottom: 50px;
}

.hard ul,
.soft ul {
    text-align: left;
    width: 70%;
    margin: auto;
    word-wrap: break-word;

}

.hard ul li,
.soft ul li {
    padding-left: 65px;
    text-indent: -65px;
}

.inte,
.ressi {
    margin-bottom: 0;
}

.ressi ul {
    margin-bottom: 150px;

}

.history {
    padding-left: 10px;
}

.bracket {
    display: none;
}

.not {
    display: unset;
}

Tablet:

body {
        width: 100%;
    }

    .divide,
    .section1 {
        width: 100%;
    }

    .first {
        height: 1200px;
        flex-direction: column;
    }

    .section1 {
        width: 90%;
        display: block;
    }

    .profile {
        margin-bottom: 70px;
    }

    .biography {
        margin: 0 auto;
    }

    .biography button {
        margin-top: 70px;
    }

Thanks everyone for the help!

Answer 1

由于你的主要问题已经解决，我试着从评论中解决你的问题如何使用媒体查询。

您只需使用一个 css 文件即可完成所有操作。对于平板电脑和移动设备，您可以使用如下媒体查询。您使用 @media 开始媒体查询，然后使用 only screen 来仅寻址屏幕。然后应用 and (min-width) and/or and (max-width) 等规则，后跟 css 开始标记 { 并使用 css 结束标记 }.在 css 之间，与您正常编写的方式相同。

/* your normal css here that should apply to every screen width as well as your desktop css that is not covered with the media queries for mobile and tablet */

@media only screen
  and (max-width: 480px) { /* <-opening tag media query */
    /* your mobile css here 
       as example: */

    .class { /* <-opening tag css selector */
      background-color: blue;
    } /* closing tag css selector */
    
    #id { /* <-opening tag css selector */
      background-color: red;
    } /* closing tag css selector */

} /* <-closing tag media query */

@media only screen
  and (min-width: 481px)
  and (max-width: 957px) { /* <-opening tag media query */
    /* your tablet css here 
       as example: */

    .class { /* <-opening tag css selector */
      background-color: blue;
    } /* closing tag css selector */
    
    #id { /* <-opening tag css selector */
      background-color: red;
    } /* closing tag css selector */

} /* <-closing tag media query */

响应式仅适用于开发工具，不适用于实际站点

Responsive works only in dev tools, not in the actual site

html

css

responsive-design