मैं पहले कहना चाहता हूं कि मैं वेब देव के लिए नया हूं, इसलिए हो सकता है कि एक स्पष्ट त्रुटि है जिसे मैं अपने कोड में नहीं पकड़ सकता ... मेरी समस्या यह है कि साइट की प्रतिक्रिया केवल तभी काम करती है जब मैं इसे में कोशिश कर रहा हूं देव उपकरण, लेकिन वास्तविक साइट में, एक ऐसा खंड है जो दूसरों के साथ आकार नहीं बदलता है (वास्तव में अनुभाग 1)। टैबलेट.सीएसएस के साथ ऐसा होता है, क्योंकि मोबाइल और डेस्कटॉप लगभग ठीक काम करते हैं। मुझे संदेह होने लगा है कि शायद mobile.css में भी यह समस्या है क्योंकि मैं ब्राउज़र विंडो को इतना छोटा नहीं बना सकता, इसलिए मैं देव उपकरणों पर भरोसा करता हूं। मैं ईमानदारी से यह नहीं समझ सकता कि क्यों ... मैंने विभिन्न ब्राउज़रों (बहादुर, एफएफ डेवलपर संस्करण, माइक्रोसॉफ्ट एज) में कोशिश की है और कहानी वही है। मैं आपको अपना कोड छोड़ता हूं, मैं मोबाइल, टैबलेट और डेस्कटॉप के लिए तीन सीएसएस का उपयोग करता हूं, क्योंकि मैंने सोचा था कि मीडिया प्रश्नों के साथ यह बहुत जटिल होगा। देव टूल के साथ साइट में एचटीएमएल:

    <!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>
* {
        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: "\2705";
        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!
1
Alebacce 22 अक्टूबर 2020, 18:18

1 उत्तर

सबसे बढ़िया उत्तर

जैसा कि आपके मुख्य मुद्दे को ठीक कर दिया गया है, मैं आपके प्रश्न को टिप्पणियों से संबोधित करने का प्रयास करता हूं कि मीडिया प्रश्नों का उपयोग कैसे करें।

आप सब कुछ के लिए केवल एक सीएसएस फ़ाइल का उपयोग करते हैं। टैबलेट और मोबाइल उपकरणों के लिए आप नीचे दिए गए मीडिया प्रश्नों का उपयोग करते हैं। आप केवल स्क्रीन को संबोधित करने के लिए @media के साथ only screen के साथ एक मीडिया क्वेरी शुरू करते हैं। फिर आप and (min-width) और/या and (max-width) जैसे नियम लागू करते हैं, उसके बाद 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 */
1
tacoshy 22 अक्टूबर 2020, 16:44