0

我的媒体查询在我的桌面上按预期工作，但在手机或平板电脑上却没有。请在此处查看实时代码http://jsfiddle.net/E8cgT/

如果屏幕大于 1024 像素，它应该是绿色的，我的平板电脑屏幕是绿色的，但背景保持黄色。

这也发生在我的手机上，不管什么是黄色的。

或阅读下文

我的html：

<html>

<head>
<title>Home Page</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
</head>
<body>
<div id="master">
<header>
</header>

<nav>


Welcome to the home page from the sites directory 

<ul>
<li><a href="#">Meet Your Sensei</a></li>
<li><a href="#">Tour Our Dojo</a></li>
<li><a href="#">Our Martial Art Program</a></li>
<li><a href="#">Our Training Schedule</a></li>
<li><a href="#">Current Events</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

</div><!-- end of the master div tag -->

</body>
</html>

我的CSS：

/* this will not work as we have below media to over ride */
body{ background-color: red;}


/* Low resolution for cell phones for 480 and below
*/
@media only screen and (max-width:480px)
{body{background-color: blue;}}

/* High resolution for screen between 1024 and above
*/
@media only screen and (min-width:1024px)
{body{background-color: green;}}

/* Medium resolution for screen between 481 and above
*/
@media only screen and (min-width:481px)
{body{background-color: yellow;}}

[解决方案]

1）视口是我不知道的东西。

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

2）我改变了屏幕的优先级毕竟是套管样式表。

body {
background-color: red;
}

@media screen and (max-width:480px)
{body{background-color: blue;}}


/* Medium resolution for screen between 481 and above
*/
@media screen and (min-width:481px)
{body{background-color: yellow;}}


/* High resolution for screen between 1024 and above
*/
@media screen and (min-width:1024px)
{body{background-color: green;}}

谢谢你们。

4

5 回答 5

2

看看这是否对您有帮助：
实时视图
编辑视图

我对您的代码进行了一些更改；

首先你要添加 

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

到页面的顶部。这将阻止智能手机和其他设备缩放页面。

在您的媒体查询中，您仅使用@media screen并且.... 仅在选择器中使用并没有错，尽管它确实具有特定用途，以隐藏旧浏览器的样式。如果这不是故意的，那么您可以省略它。
（关键字“only”也可用于隐藏旧用户代理的样式表。：来源

我认为如果您使用不同大小的视口，您将更容易定位 

@media screen and (min-width:Xpx) and (max-width:Ypx){  
....
}

正如@Tdelang 正确指出的那样。

祝你好运！

于 2013-08-08T10:45:15.350 回答
0

您是否尝试过使用

@media all

或者

 @media handheld, screen and (max-width:480px) { /* your css */ }
于 2013-08-08T10:17:16.473 回答
0 
@media screen and (max-width:480px)
 {body{background-color: blue;}}

 /* High resolution for screen between 1024 and above
 */
@media screen and (min-width:1024px)
  {body{background-color: green;}}

/* Medium resolution for screen between 481 and above
*/
@media screen and (min-width:481px)
 {body{background-color: yellow;}}

使用它，这将适用于我的手机、ipad 和窗口屏幕。

于 2013-08-08T10:41:22.517 回答
0

尝试这个

http://jsfiddle.net/E8cgT/3/

CSS

/* this will not work as we have below media to over ride */
body {
    background-color: red;
}


 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
body
    {
        background-color: blue;
    }

}

/* Low resolution for cell phones for 480 and below
*/
@media only screen and (max-width:480px) {
body {
    background-color: blue;
}
}



/* High resolution for screen between 1024 and above
*/
@media only screen and (max-width:1024px) {
body {
    background-color: green;
}
}

/* Medium resolution for screen between 481 and above
*/
@media only screen and (max-width:481px) {
body {
    background-color: yellow;
}
}

或请将此 CSS 用于响应式MOBILE、、TABLETDESKTOP

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2013-08-08T10:18:27.513 回答
0

因为级联。您必须为中间断点设置上限：

media only screen and (min-width:481px && max-width:1023px)
{
    ...
于 2013-08-08T10:13:19.667 回答