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

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

谢谢！

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

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

这里的问题是我的@media(最小宽度：768px(当我使用手机模拟器时覆盖我的电话查询(在谷歌开发上(

这是我的完成 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>

在这里，我的完成 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;
  }
}

这是我讲述的照片

相关内容

最新更新

热门标签：