CSS媒體查詢無法在移動設備上運行

Question

我會保持簡潔。使用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

有任何想法嗎？？ 在這瘋狂。 謝謝！

Answer 1

使用此元標記和媒體查詢，

<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

將媒體查詢添加到Foundation.css文件中時，它將無法正常工作。 您應該為媒體查詢創建一個單獨的CSS文件並覆蓋它。 創建一個文件並編寫如下代碼。 我寫過改變顏色。

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

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

只需將背景顏色的標簽更改為圖像即可。

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