Question

我来这里问一个问题，我昨天开始了一个项目，所以我现在做了我的设计原型我首先在移动设备上开始我的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%;
  }
}

Answer 2

这里的问题是我的@media（min-width：768px）覆盖我的手机查询当我在手机模拟器上（在google dev上）

这是我的complet HTMl

<!DOCTYPE html>
<html>
<head>
    <title> BLCM Tunisie </title>
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
    <header>
        <nav id="navbar">
    <div id="logo"><img src="./assets/images/bastide.jpg"></div>
        <div id="op-horizontalnav">
            <ul class="op-sectionlist">
                <li class="op-v-item"><a class="op-v-link" href="#mysect1">PRESENTATION</a></li>
                <li class="op-v-item"><a class="op-v-link" href="#mysect2">PRODUITS</a></li>
                <li class="op-v-item"><a class="op-v-link" href="#mysect3">EQUIPE</a></li>
                <li class="op-v-item"><a class="op-v-link" href="#mysect4">CONTACT</a></li>
            </ul>
        </div>
    </nav>
    </header> 
    <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>

        <section id="mysect3">
        <h2> Equipe </h2>
        <div id="imageTeam">
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerome Yvanez <br/> Developper</p> </div> 
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jean bon <br/> Web marketer</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jesui Palas <br/> CM</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Sylla Bique <br/> Graphiste </p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Mac Donald <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          <div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
          </div>
        </section>

        <section id="mysect4">
            <h2> Nous contacter </h2>
            <form action="post">
                <input placeholder=" Nom et Prénom" type="text" id="firstname">
                <input type="text" id="email" placeholder="email">
                <input type="text"size="6" id="contactContent" placeholder ="contenue du message">
                <input type="submit" id="send"/>
            </form>
        </section>

    </div>

    <footer></footer>

</body>
</html>

这里是我的complet CSS

 html, body {
  border: 0;
  font-family: Helvetica LT Condensed;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none; 
  width:100%;
}

body{
    background: url(../images/fond.png);
    background-size: 200%;
    background-repeat: repeat;
    background-position-x: 60%;
    background-position-y: 118%;
}

section {
  padding:20px;
}

h2, h3 {
  text-align:center;
  font-size:4em;
}


#container{
  margin-top:150px;
}

/*============ CSS 'Header' mobile first ========== */



header.active #logo img {
  width:100px;
  height:40px;
  margin:4px 0 0 20px;
  padding-left:40px;
}

#logo { text-align:left; }

#logo img{
  width:140px;
  height:55px;
  transition:  .4s all linear;
  -moz-transition:  .4s all linear;
  -webkit-transition: .4s all linear;
  -o-transition:  .4s all;
  margin:14px 0 0 20px;
  display:block;
}

header{
  color:white;
  position:fixed;
  background-color:black;
  text-align:right;
  right:0;
  top:0;
  left:0;
  z-index:501;
  height:80px;
}

#navbar { 
  text-align:right;
  position:relative;
  font-size:19px;
}

ul { margin-top:-34px; }

li{ 
  display:inline; 
  margin-top:;
  padding-right:50px;  
  transition: .4s all linear;
  -moz-transition: .4s all linear;
  -webkit-transition: .4s all linear;
  -o-transition: .4s all linear;
}


.active li{ 
  font-size:0.8em; 
  padding-top:20px, 
  padding-right:40px; 
}

.active ul { margin-top:-30px; } 

a.active {
  background-color:red;
  color:white;
  padding:5px;
  font-weight:bold;
}

a{ text-decoration: none; color:white;}




@media(min-width: 480px){
  /* =========== CSS 'Presentation' mobile first =========== */


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



  /* =========== CSS 'Produits' ============= */ 

  #mysect2{
    text-align:center;
  }

  #mysect2 img {
    width:90%;
  }


  /* ========== CSS 'Equipe' mobile-first ===========*/
  #imageTeam { 
    text-align:center; 
    padding-top:20px; 
    order:2;
  }

  .imgWrapper { display:inline-block; width: 42%; }

  .imgWrapper p { 
    background-color:red; 
    padding:20px 117px 21px 110px; 
    color:white; 
    margin-top:-5px; 
    width:inherit;
    font-size:39px;
    display:inline-block;
  }

  #imageTeam img{ width:100%;

  }
  /*=========== CSS 'Contact' mobile first ============= */ 

  form {
    width:100%;
  }

  input, textarea, select {
    font-size:44px;
    margin-top:25px;
    padding:10px;
    box-sizing:border-box;
    background:none;
    outline:none;
    resize:none;
    border:0;
    transition:all .3s;
    border-bottom:1px solid #F7941D;
    border-right:1px solid #F7941D;
    width:100%;

  }

  input:focus { border-bottom:3px solid #F7941D; border-right:3px solid #F7941D;}

  #send {     
    padding: 15px;
    background-color: #F7941D;
    margin-bottom: -6px; }

  #send:hover{ background-color:#B40303; }

  #contactContent { height:100px; }

  #mysect4 {
    padding: 0 10px 0 0px;
    margin-left: -6px;
  }
}


/*============== DEBUT CSS TABLETTE ============= */ 


@media (min-width:768px) {

/*============== CSS 'Presentation' TABLETTE =============*/

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

/*============= CSS 'Produits' TABLETTE =================*/ 

  #mysect2 {
    text-align:center;
  } 

  #mysect2 img {
    width:70%;
  }

  .imgWrapper {
    width:35%;
  }

  #imageTeam img {
    width: 86%;
  }

  #imageTeam p {
    padding:10px 85px 12px 84px;
    font-size: 21px;

  }
}

this is a pics of what I tell

平板电脑/桌面媒体查询覆盖我的移动第一个CSS

2 个答案: