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

Question

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

Yel*_*dio 1 css media-queries responsive-design

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

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

我的代码是针对各种各样的屏幕尺寸@media only屏幕和(min-width:700px)和(max-width:959px){.wrapper-900 {width:100%; 背景:#CCC;}

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#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 { width: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 { width: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 { width: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%; }
}

Run Code Online (Sandbox Code Playgroud)

}

@media only screen and(min-width:550px)and(max-width:699px){.wrapper-900 {width:100%; }

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#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 { width: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 { width: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 { width: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%; }
}

Run Code Online (Sandbox Code Playgroud)

}

@media only screen and(min-width:430px)and(max-width:549px){.wrapper-900 {width:100%; }

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#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 { width: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 { width: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 { width: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%; }
}

Run Code Online (Sandbox Code Playgroud)

}

@media only screen and(min-width:320px)and(max-width:429px){.wrapper-900 {width:100%; }

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#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 { width: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 { width: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 { width: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%; }
}

Run Code Online (Sandbox Code Playgroud)

}

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

Answer 1

Bri*_*ian 6

您没有视口元标记:

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

Run Code Online (Sandbox Code Playgroud)

这是一个(相当长的)有用的解释,说明整个视口交易是如何工作的.

归档时间：	13 年，2 月前
查看次数：	1471 次
最近记录：	6 年，3 月前