CSS问题 - 编程之家

如何解决CSS问题

我本月开始学习Sonia Baibou撰写的《》一书。我正要做完全相同的事情，但这是行不通的。我有自己的网页，并且正在尝试使用Media查询来适应小屏幕。我写了这个

@media screen and (max-width: 414px) {
  #apropos{
    flex-direction: column;
    color: red;
  }
}

和

<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

如果您能帮助我，我将不胜感激。

解决方法

尝试此操作，当您调整大小时，文本的颜色应更改如果大于414像素，则小于414像素时，它将更改为另一种颜色。

    
h1{
color: red;
}

h5{
color: green
}

@media screen and (min-width: 414px) {
  h1{
    color: green;
  }
  h5 {
  color: blue;
  }
}

<h1> hello <h1>

<h5> this might be helpful <h5>

尝试仅使用-> @仅媒体屏幕...

我添加了完整的html和CSS

@font-face{
    font-family: 'Luna';
    src: url('./Luna.ttf');
}
 
 html{
    font-family: 'arial';
    font-size: 16px;
 }
*{
    margin: 0%;
    padding: 0%;
}

#hero{
    background:url('./fond.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 1%;
}

nav{
    background-color: rgba(0,0.5);
    text-align: center;
    padding: 20px
}

a{
  color: white;
  text-decoration: none;
  padding: 20px;
  transition: 1s;
}
a:hover{
    font-size: 24px;
}
#bandeau{
    margin-top: 10%;
    margin-bottom: 10%;
    background-color: rgba(255,255,0.5);
}

#contenu{
    text-align: center;
    padding: 5%;
}

h1{
    font-family:'Luna';
}
#contenu a{
    color: red;
    border: 1px solid red;
    border-radius: 15px;
    padding: 20px;
    transition: 1s;
}
#contenu a:hover{
    color: white;
    background-color: rgba(178,32,19,0.8);
}
#contenu img:hover{
    transition: 0.8s;
    transform: rotate(360deg) scale(3);
}

#apropos{
    display: flex;
}
#apropos_image{
    padding: 20px;
    flex: 1;
    max-width: 100%;
}
#apropos_texte{
    padding: 20px;
    flex: 2;
    text-align: justify;
}

#services{
    display: flex;
    background-color: #666;
    color: white;
    padding: 20px;
    text-align: center;
}
.services_items p{
    text-align: justify;
    padding: 20px;
}

@media screen and (max-width: 414px) {
  #apropos{
    flex-direction: column;
    color: red;
  }
}

<!DOCTYPE html>

<html> 

  <head>
    <meta charset="utf-8">
    <title>OhMyCode</title>
    <meta name="description" content="OhMYCODE! Je code mon premier site web"/>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/275443d32b.js" crossorigin="anonymous">
  </script>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  </head>

  <body>
   <section id="hero">
    <nav>

     <a href="http://www.linkedin.fr" target="_blank"> Linkedin</a>
     <a href="http://www.monentreprise.fr" target="_blank">Mon Entreprise</a>
     <a href="monCV.pdf" target="_blank">MON CV</a>

    </nav>

    <div id="bandeau">
     <div id="contenu">

      <img src="MonLogo.png" alt="MonLogo" width="100"/>
      <h1>OhMyCode</h1>
      <h2>Je code mon premier site</h2>
      <h3>Toutes les infos ici</h3>
      <br/></br/>
      <a href="mailto:ohmycode@test.com?subject=Demande de Contact">Contactez-moi</a>

     </div>
    </div>

   </section>

   <section id="apropos">

     <div id="apropos_image">
      <img src="apropos_image.jpg">
     </div>

     <div id="apropos_texte">
       <p>Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant,hos perire patiemur? An,si qui frui publico non potuit per hostem,hic tegitur ipsa lege censoria; quem is frui non sinit,qui est,etiamsi non appellatur,hostis,huic ferri auxilium non oportet? Retinete igitur in provincia diutius eum,qui de sociis cum hostibus,de civibus cum sociis faciat pactiones,qui hoc etiam se pluris esse quam collegam putet,quod ille vos tristia voltuque deceperit,ipse numquam se minus quam erat,nequam esse simularit. Piso autem alio quodam modo gloriatur se brevi tempore perfecisse,ne Gabinius unus omnium nequissimus existimaretur.Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant,ne Gabinius unus omnium nequissimus existimaretur.hostibus,ne Gabinius unus omnium nequissimus existimaretur.
       </p>
     </div>

   </section>

   <section id="services">

     <div class="services_items">
       <i class="fas fa-graduation-cap fa-4x"></i>
       <p>Lorem Ipsum est un générateur de faux textes aléatoires. Vous choisissez le nombre de paragraphes,de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes.
       </p>
     </div>

     <div class="services_items">
      <i class="fas fa-chart-line fa-4x"></i>
       <p>Lorem Ipsum est un générateur de faux textes aléatoires. Vous choisissez le nombre de paragraphes,de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes.
       </p>
     </div>

     <div class="services_items">
      <i class="fas fa-trophy fa-4x"></i>
       <p>Lorem Ipsum est un générateur de faux textes aléatoires. Vous choisissez le nombre de paragraphes,de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes.
       </p>
     </div>

   </section>
  </body>

</html>