Question

/***** BIGGER SCREEN *****/

@media screen and (min-width: 1367px) {

#body-wrapper {
max-width: 1367px;
margin: auto;

}

}

/** IPHONE **/

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 

#logo {
    display: none;
}

.wrapper {
    height: 200px;
}
}

试图让一个简单的媒体iphone查询工作，我已经尝试了一切，但它没有对我的浏览器/手机进行任何更改，我有元视口和文件工作正常。我已经对其他尺寸的查询进行了更改，因为某些原因，一旦我低于700px，无论我做什么都没有变化..

Answer 1

仅使用max-width

.regular-classes {
    ...
}

/* narrower than 1367px - overrides all attributes from the regular selectors */
@media screen and (max-width: 1367px) {
    ...
}

/* narrower than 667px - overridse all attributes from the queries above */
@media only screen
and (max-device-width : 667px) { 
    ...
}

/* narrower than 375px - overrides all attributes from the queries above*/
@media (max-device-width : 375px) {
    ...
}

Answer 2

更新css

    @media only screen 
and (min-width : 375px) 
and (max-width : 667px) { 

#logo {
    display: none;
}

.wrapper {
    height: 200px;
    border:1px solid black;
}
}

现场演示 https://jsfiddle.net/jjff2o2x/

尝试调整窗口大小并在小提琴中更改效果

媒体查询不适用于较小的屏幕尺寸

2 个答案: