媒体查询CSS [英] Media Queries CSS

问题描述

出于某种原因，我的媒体查询在从iphone或移动设备查看时未正确调整我的网站大小，因此我在iphone上获取了该网站的平板电脑版本。媒体查询适用于平板电脑，适用于缩小浏览器窗口的情况。

For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.

我错过了什么？

@media only screen and (min-width: 1024px) {
/*styling here*/
}

@media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}

@media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}

推荐答案

我认为您可能需要将其指定为'min-device-width'。

I think you may need to specify it as 'min-device-width'.

@media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
    /*Mobile styling here*/
}

这篇关于媒体查询CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！