CSS媒体查询在移动设备上无法正常工作

Question

CSS媒体查询在移动设备上无法正常工作

4

我会简明扼要地说明。使用Zurb Foundation 5构建网站。媒体查询无法正常工作。代码如下：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>...</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/vendor/modernizr.js"></script>
</head>

相关的CSS设置如下：

    #examplediv {
    style:background-image;
    }

    @media only screen and (max-width: 40em) { 
        #examplediv {
        style:different-background-image;
    }
    }

使用em单位的媒体查询，参考此页面

有任何想法吗？我在这里疯了。谢谢！

- pixel_priest

你所说的“不起作用”是什么意思？规则在什么情况下没有被应用？ - Pekka

1

使用(max-device-width: 40em)。 - Milan and Friends

可能是CSS错误 - 你有实际的代码吗？ - L_Holcombe

@Pekka웃 通过“不工作”，我的意思是它无法识别我在媒体查询中放置的任何样式。 - pixel_priest

@mdesdev非常感谢！我知道它肯定是些简单的东西，只是让我无法理解真是太痛苦了。谢谢你！ - pixel_priest

显示剩余2条评论

2个回答

-1

当您将Media Queries添加到Foundation.css文件中时，它将无法工作。您应该为Media Queries创建一个单独的CSS文件并覆盖它。创建一个文件并编写以下代码。我已经编写了更改颜色的代码。

在中文中，

标签通常不会翻译。

     @media only screen and (max-width: 40em) {  
      body {
         background-color: yellow;
           }
     }

     @media only screen and (min-width: 41em) { 
      body {
         background-color: red;
           }
     }

只需将背景颜色的标签更改为图像即可。

- Karthikeyan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Piyush Marvaniya · Accepted Answer

使用这个meta标签和媒体查询，

<header>
 <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>




  /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-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-width : 768px)
    and (max-width : 1024px) {
    /* Styles */
    }

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

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-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 */
    }