堆棧內存溢出
  簡體   English   中英

HTML / CSS中的媒體查詢

[英]Media Queries in HTML/CSS

 原文  2016-12-14 17:49:33  4   3    html/ css

問題描述

我必須在我的代碼中實現一些媒體查詢並使用col。

我已經設法修復了大部分問題，但是當涉及到我的平板電腦解決方案時，我不知道該怎么辦。

事實是，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++ --*/

3 個解決方案

解決方案1
 0  2016-12-14 17:54:50

嘗試顛倒媒體查詢的順序。 將平板電腦一放在屏幕一的下方。 它可能會覆蓋它。 希望對您有所幫助。 :-)。

解決方案2
 0  2016-12-14 17:57:11

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

解決方案3
 0  2016-12-15 10:53:01

替換媒體查詢

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

至

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML/CSS 中的媒體查詢問題 HTML/CSS 標頭媒體查詢 與媒體查詢相關的 HTML 和 css 使用媒體查詢的響應式HTML和CSS HTML LINK 媒體和 CSS 媒體查詢之間的區別 CSS媒體查詢不顯示 媒體查詢CSS麻煩 增量CSS媒體查詢 CSS 媒體查詢幫助 帶有媒體查詢的響應式 CSS
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM