Question

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

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

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

或阅读以下

我的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;}}

谢谢大家。

Answer 1

看看这是否对您有所帮助：
Live view
Edit view

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

首先要添加

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

到页面的头部。这将阻止智能手机和其他设备扩展页面。

在您的媒体查询中，您只使用@media屏幕和....仅在选择器中使用没有任何问题，尽管它具有特定用途，可以隐藏旧版浏览器的样式。如果这不是故意的，那么你可以省略它（关键字“only”也可用于隐藏旧用户代理的样式表：source

如果您使用

，我认为您可以更轻松地定位不同尺寸的视口

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

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

祝你好运！

Answer 2

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

media only screen and (min-width:481px && max-width:1023px)
{
    ...

Answer 3

您是否尝试过使用

@media all

或

 @media handheld, screen and (max-width:480px) { /* your css */ }

Answer 4

试试这个

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，TABLET，DESKTOP

/* 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 */
}

Answer 5

@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和窗口屏幕上都有用。

为什么媒体查询不能在手机和平板电脑上运行

5 个答案:

为什么媒体查询不能在手机和平​​板电脑上运行

5 个答案:

为什么媒体查询不能在手机和平板电脑上运行