css - 平板电脑/桌面媒体查询覆盖我的移动优先 CSS

Question

我来这里是为了问一个问题 我昨天开始了一个元素，所以我目前正在做我的设计原型(prototype)我首先在移动设备上开始我的 CSS，但是当我使用我的媒体查询时，移动设备优先属性被覆盖并将平板电脑查询作为我的主要 css，我不明白为什么:/

这是html

<div id="container">
    <section id="mysect1">
        <h2> Presentation </h2> 
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </section>

    <section id="mysect2">
        <h2> Produits </h2> 
        <img src="./assets/images/fauteuil.png">
        <img src="./assets/images/tensio.png">
        <img src="./assets/images/inco.png">
        <img src="./assets/images/lit.png">
    </section>

这是我的 CSS

  #mysect1 p {
        font-size:1.1em;
      }


    #mysect2{
      text-align:center;
    }

    #mysect2 img {
      width:90%;
    }


    @media (min-width:768px) {



      #mysect1 p {
        font-size:1.8em;
      }



      #mysect2 {
        text-align:center;
      }

      #mysect2 img {
        width:70%;
      }
}

谢谢!

Answer 1

您需要为移动设备定义一个单独的媒体查询

@media (min-width:480px) {  
  #mysect1 p {
    font-size:1.1em;
  }
  #mysect2{
    text-align:center;
  }
  #mysect2 img {
    width:90%;
  }
}