CSS媒体查询无法在移动设备上运行

Question

I'll keep it concise.. Using Zurb Foundation 5 to build a site. 我会保持简洁。使用Zurb Foundation 5建立一个网站。 Media Queries not working. 媒体查询无效。 Code is as follows: 代码如下：

<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>

Relevant CSS is set up like this: 相关的CSS设置如下：

    #examplediv {
    style:background-image;
    }

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

Using em in media query, per this page 按照此页面在媒体查询中使用em

Any ideas?? 有任何想法吗？？ Going crazy here. 在这疯狂。 Thanks! 谢谢！

Answer 1

Using this meta tag and media query, 使用此元标记和媒体查询，

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

Answer 2

Media Queries wont be working when you add it in Foundation.css file. 将媒体查询添加到Foundation.css文件中时，它将无法正常工作。 You Should create a seperate CSS file for media Queries and overwrite it. 您应该为媒体查询创建一个单独的CSS文件并覆盖它。 Create a file and write the code as follows. 创建一个文件并编写如下代码。 I have written for changing color. 我写过改变颜色。

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

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

Just change the tag of Background-color to image. 只需将背景颜色的标签更改为图像即可。

CSS媒体查询无法在移动设备上运行

问题描述

2 个解决方案

解决方案1
9 2014-02-14 06:36:43

解决方案2
0 2014-02-03 07:34:56

CSS媒体查询无法在移动设备上运行

问题描述

2 个解决方案

解决方案1 9 2014-02-14 06:36:43

解决方案2 0 2014-02-03 07:34:56

解决方案1
9 2014-02-14 06:36:43

解决方案2
0 2014-02-03 07:34:56