CSS Media Queries Funktioniert Nicht auf Mobilen

Behalte ich es concise.. Mit Zurb Foundation 5 um eine Website zu bauen. Media Queries funktionieren nicht. Code ist wie folgt:

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

Entsprechenden CSS ist wie folgt eingerichtet:

    #examplediv {
    style:background-image;
    }

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

Mit em in den Medien-Abfrage, pro auf dieser Seite

Irgendwelche Ideen?? Hier noch verrückt. Danke!

  • Was doe du meinst mit "funktioniert nicht"? Wie wird die Regel nicht angewendet, in welchem Zusammenhang?
  • Verwenden (max-device-width: 40em)
  • Könnte sein, CSS-Fehler - Sie haben tatsächliche code?
  • durch die nicht arbeiten, ich meine, es erkennt nicht jeden Stil, die ich in media query
  • DANKE!!! ich wusste, es musste etwas einfaches, einfach nur zum Verrücktwerden, ich konnte nicht es herausfinden. danke!!!
  • Du bist willkommen 😉
  • Haben u versucht, die Verwendung anderer Einheiten als em, wie px?

InformationsquelleAutor pixel_priest | 2014-02-02
  1. 9

    Mit diesem meta-tag-und-Medien-Abfrage, 

    <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 */
    }
    • Ich habe den meta Ansichtsfenster und deine Antwort hat Prima funktioniert... vielen Dank für diese @PiyushMarvaniya
    InformationsquelleAutor Piyush Marvaniya
  2. 0

    Media Queries werden nicht arbeiten, wenn Sie es hinzufügen, in der Stiftung.css-Datei. Erstellen Sie eine separate CSS-Datei für media Queries und überschreiben Sie ihn. Erstellen Sie eine Datei und schreibt den code wie folgt. Ich habe geschrieben für die Farbe zu ändern. 

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

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

    Ändern Sie einfach den tag Background-color image.

    InformationsquelleAutor Karthikeyan
Schreibe einen Kommentar