1. 首頁
  2. 問答
  3. HTML/CSS中的媒體查詢

HTML/CSS中的媒體查詢

2016-12-14 29 views
0

我必須執行一些媒體查詢進入我的代碼&使用col's。HTML/CSS中的媒體查詢

我已經設法修復它的大部分，但是當涉及到我的平板電腦解決方案時，我無法弄清楚要做什麼。

事情是，col-4 & col-8應該用於平板電腦，而在產品盒中圖片應該在右側，而左側的文本（全部在盒子內） 。

這是我的HTML代碼，然後CSS底部。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>ZENFERIER.NO</title> 
    <link rel="stylesheet" type="text/css" href="css/meyersReset.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">  
</head> 

<body> 

    <div id="container"> 

     <!-- Header område, inkluderer header, banner og nav --> 
     <header id="mainPageHeader"> <a id="logo" href="#ng">Zenferier.no</a> 
      <ul> 
       <li> <a href="#ng">Hjem</a> </li> 
       <li> <a href="#ng">Om Oss</a> </li> 
       <li> <a href="#ng">Reisetips</a> </li> 
       <li> <a href="#ng">Kontakt Oss</a> </li> 
      </ul> 

      <div id="mainPageBanner" class="img-responsive"> 
       <div id="tekstBanner">Book din ferie hos oss!</div> 
      </div> 
     </header> 
     <!-- slutt header område --> 

     <!-- hovedområde med produktbokser --> 
     <main id="mainContent"> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/tenerife.jpg" alt="Bilde Tenerife" class="img-responsive"> </div> 
        <div class="product-content-box"> 
        <h2>Tenerife</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/kyoto.jpg" alt="Bilde Kyoto" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Kyoto</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/barcelona.jpg" alt="Bilde Barcelona" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Barcelona</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/lasvegas.jpg" alt="Bilde Las Vegas" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Las Vegas</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/london.jpg" alt="Bilde London" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>London</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/tokyo.jpg" alt="Bilde Tokyo" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Tokyo</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/paris.jpg" alt="Bilde Paris" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Paris</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/berlin.jpg" alt="Bilde Berlin" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Berlin</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/oslo.jpg" alt="Bilde Oslo" class="img-responsive"></div> 
       <div class="product-content-box"> 
        <h2>Oslo</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

     </main> 
     <!-- slutt hovedområde --> 

    </div> 
</body> 

</html>

CSS：

@charset "utf-8"; 
body { 
    margin: 0; 
} 

#container { 
    max-width: 80%; 
    min-height: 100%; 
    margin: auto; 
} 


/*-- mainPageHeader --*/ 

#mainPageHeader { 
    background-color: #797067; 
    max-width: 100%; 
} 

#logo { 
    color: #FFFDF6; 
    text-decoration: none; 
    font-size: 2em; 
    font-family: 'Roboto Slab', serif; 
    display: inline-block; 
    padding-top: 0.25em; 
    padding-bottom: 0.25em; 
} 


/*-- end mainPageHeader --*/ 


/*-- mainPageNav --*/ 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #4D8FAB; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: #FFFDF6; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #C4B197; 
} 


/*-- mainPageBanner --*/ 

#mainPageBanner { 
    height: 250px; 
    background-color: #4D8FAB; 
    /*blå*/ 
    background-image: url(../img/banner1.jpg); 
    background-size: 100%; 
    background-position: 0px 0px; 
    display: none; 
} 


/*-- end mainPageBanner --*/ 


/*-- tekst på banner --*/ 

#tekstBanner { 
    font-size: 2em; 
    font-family: 'Roboto Slab', serif; 
    background-color: #EBDBAE; 
    color: #4D8FAB; 
    width: 35%; 
    height: 30%; 
    padding: 10px; 
    padding-bottom: 0px; 
    margin-left: 50px; 
    margin-top: 90px; 
    display: inline-block; 
} 


/*-- mainPageFooter --*/ 

#mainPageFooter { 
    background-color: #797067; 
    bottom: 0; 
    height: 30px; 
    padding: 20px; 
} 


/*-- diverse kode --*/ 

.img-responsive { 
    width: 100%; 
} 

.product-box { 
    margin-left: 0.25em; 
    margin-right: 0.25em; 
} 

#mainContent { 
    margin-top: 10px; 
} 

h1 { 
    font-family: 'Roboto Slab', serif; 
    font-size: 30px; 
} 

h2 { 
    font-family: 'Roboto Slab', serif; 
    font-size: 25px; 
    color: black; 
} 

p { 
    font-family: 'Roboto', sans-serif; 
} 


/*-- media query tablet --*/ 

@media screen and (min-width:768px){ 
    .product-box { 
     margin: 0; 
     margin-bottom: 30px; 
    } 
    .product-content-box { 
     background-color: #C4B197; 
     margin-left: 10px; 
     margin-right: 10px; 
     padding: 15px; 
    } 
    .col-tablet-4 { 
     width: 33,33; 
     float: left; 
    } 

    .col-tablet-8 { 
     width: 66,66%; 
     float: left; 
    } 
} 
/*-- end media query tablet --*/ 


/*-- media query screen 1024++ --*/ 

@media screen and (min-width:1024px){ 
    .col-screen1-4 { 
     width: 33.33%; 
    } 
    #mainPageBanner { 
     display: block; 
    } 
} 

@media screen and (min-width:1240px){ 
    .col-screen1-5 { 
     width: 25%; 
    } 
    #mainPageBanner { 
     display: block; 
    } 
} 


/*-- end media query screen 1024++ --*/

來源

2016-12-14 Rana Baghdar

回答

0

嘗試扭轉媒體查詢的順序。將平板電腦放在屏幕下方一個。它可能會壓倒它。我希望有所幫助。 :-)。

來源

2016-12-14 17:54:50

+0

感謝您的提示，但它沒有奏效。我仍然無法設法讓平板電腦產品盒子彼此相鄰：/它應該是這樣的： square 1：img - text square 2：text img square 3：text - img square 4：img text –

0

我相信你必須使用.在CSS小數點分隔符 - 第一個媒體查詢，你已經使用逗號設置寬度.col-tablet-4和.col-tablet-8,作爲小數點分隔符。您也省略了的寬度.col-tablet-4。

來源

2016-12-14 17:57:11

+0

感謝您的支持。小費！我現在注意到了，我也加了％，但他們沒有改變任何東西 –

0

更換介質查詢

  • @media屏幕和（最小寬度：768px）{}

到

  • @media屏幕和（最大寬度：768px ）{}

來源

2016-12-15 10:53:01 Narendra

相關問題

 相關問題