裁决ipad查询的媒体查询

时间:2017-07-28 17:44:12

标签: html css css3

媒体查询正在运行,但在调整浏览器大小时,ipad的查询超过了普通媒体查询的规则

正在使用的查询是否超过规则:

#products-list li:nth-child(3n+1) {     
    clear: left;
}

而不是:

#products-list li:nth-child(2n+1) {     
    clear: left;
}

普通查询:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 

    #menu #burger {
        display: none;
    }

    #menu ul {
        display: block;
        max-width: 850px;
        margin: 0 auto;
        text-align: center;
    }

    #menu ul li {
        display: inline-block;
        text-align: center;
    }

    #menu ul li:nth-child(8n) {
        clear: left;
        margin-top: 26px;
    }

    #menu ul li a {
        padding: 8px 16px;
        transition: all .5s ease;
    }

    #menu ul li a:hover {
        background: #000;
        color: #fff;
    }

    #menu #lines {
        max-width: 300px;       
        margin: 20px;
        padding-top: 35px;
        margin: 0 auto;
    }

    #menu #lines .line {
        border-bottom: 1px solid #000;
    }

    #menu #lines #line-1 {
        width: 100%;
        margin-bottom: 10px;
    }

    #menu #lines #line-2 {
        width: 66%;
        margin-bottom: 10px;
        margin: 0 auto;
    }

    #menu #lines #line-3 {
        width: 33%;
        margin: 0 auto;
        margin-top: 10px;
    }

    #search-wrapper {       
        position: relative;
    }

    #search-box {
        margin: 0 35px;
        max-width: 250px;
        float: right;
    }

    .nav-section {
        margin: 0 35px;
        margin-top: 15px;
    }

    #navbar #nav-left, #navbar #nav-right {
        margin: 0;  
    }

    #nav-right {
        float: right
    }

    #products-container { 
        padding: 35px;
        padding-top: 35px;
        padding-bottom: 0;
    }

    #products-list {
        margin: -17px;
    }

    #products-list li {
        width: calc(33.33% - 35px);
        display: inline-block;
        float: left;
        margin: 0 17px 0 17px;

    }

    #products-list li > div {
        margin-bottom: 35px;
    }

    #products-list li:nth-child(3n+1) {     
        clear: left;
    }       
}

在这行代码下面,用代码obuve统治了#products-list li:nth-​​child(3n + 1);

@media only screen
and (min-width: 768px)
and (max-width: 1024px) {
    #nav-right {
        float: right
    }

    #products-container { 
        padding: 35px;
        padding-top: 20px;
        padding-bottom: 0;
    }

    #products-list {
        margin: -20px;
    }

    #products-list li {
        width: calc(50% - 20px);
        display: inline-block;
        float: left;
        margin: 0 10px 0 10px;

    }

    #products-list li > div {
        margin-bottom: 35px;
    }

    #products-list li:nth-child(3n+1) {     
        clear: left;
    }       
}

0 个答案:

没有答案