Question

此问题出在我的投资组合网站http://www.sierraisadesigner.com这个网站上。

媒体查询在Firefox中运行得很好，但在任何其他浏览器或我尝试过的任何移动设备上都没有。我试过iPad第一代，iPod和Kindle Fire（也是第一代）。

我的代码是针对各种各样的屏幕尺寸 @media only screen and（min-width：700px）and（max-width：959px）{ .wrapper-900 {宽度：100％;背景：#CCC;}

#content-bg { padding:20px 0px 0px 0px; }

.width-200 { width:25%; }
.width-550 {width:65%; }

#footer { padding:15px; }
.footer-module { width:25%; }

}

@media only screen and（min-width：550px）and（max-width：699px）{ .wrapper-900 {宽度：100％; }

#content-bg { padding:20px 0px 0px 0px; }
#content { padding:50px 10px 10px 10px; }

.width-200 { width:25%; }
.width-550 { width:65%; }

TEXTAREA { width:90%; height:200px; }
INPUT[type=text] { width:90%; }

#footer { padding:10px; }
.footer-module { width:25%; }

}

@media only screen and（min-width：430px）and（max-width：549px）{ .wrapper-900 {宽度：100％; }

HEADER LI { background:#CCEFFF; padding:10px 15px 10px 15px; }
#header-nav { width:100%; }

#content-bg { padding:20px 0px 0px 0px; }
#content { padding:50px 0px 0px 0px; }
.article { padding:15px 15px 15px 15px; }

.width-200 { width:90%; padding:10px; }
.width-550 { width:100%; }

FORM { text-align:center; }
TEXTAREA { width:80%; height:200px; }
INPUT[type=text] { width:80%; }

#footer { padding:10px; }
.footer-module { width:30%; }

}

@media only screen and（min-width：320px）and（max-width：429px）{ .wrapper-900 {宽度：100％; }

.header-swirl { visibility:hidden; font-size:0.1em; }
.header-name { font-size:1.8em; }

HEADER LI { background:#CCEFFF; padding:7px; }
HEADER UL { padding:0px; width:100%; }
#header-nav { margin:10px 0px 10px 0px; }

.slider-img img { width:150%; float:left; margin-left:-50%; }

#content-bg { padding:20px 0px 0px 0px; }
#content { padding:50px 0px 0px 0px; }
.article { padding:15px 15px 15px 15px; }

.width-200 { width:90%; padding:10px;}
.width-550 { width:100%; }

FORM { text-align:center; }
TEXTAREA { width:80%; height:200px; }
INPUT[type=text] { width:80%; }

#footer { padding:10px; }
.footer-module { width:90%; }

}

我也尝试过使用max-device-width而不是max-width（或min-width），它可以在iPad上运行，但在Firefox中无法响应，只是在Chrome中表现得非常奇怪。救命！我错过了什么？

Answer 1

您没有视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

Here's一个（相当长的）有用的解释，说明整个视口交易是如何运作的。

媒体查询，移动设备无响应

1 个答案: