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

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 查询工作，我已经尝试了一切，但它在我的浏览器/手机上没有任何变化，我有元视口(viewport)和文件工作正常。我已经对其他大小的查询进行了更改，但由于某种原因，一旦我低于 700px，无论我做什么都没有任何变化..

Answer 1

仅使用最大宽度

.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) {
    ...
}