Meine Medienabfragen funktionieren nicht und ich weiß nicht warum. Es ist mein erstes Mal mit Medienabfragen

Ich habe gerade angefangen, Medienabfragen zu üben, und ich bin mir nicht sicher, warum der Code unten nicht funktioniert. Media Queries ist sehr neu für mich, also entschuldige mich, wenn meine Frage dumm erscheint. Ich schreibe den Code für ein Smartphone. DankMeine Medienabfragen funktionieren nicht und ich weiß nicht warum. Es ist mein erstes Mal mit Medienabfragen

Hier ist der HTML-

<head> 
    <link href="portfolio.css" rel="stylesheet" media="screen"> 
</head> 

<body> 

    <div class="intro"> 
     <ul class="menu"> 
      <li><a href="#">SKILLS</a></li> 
      <li><a href="#">MY WORK</a></li> 
      <li><a href="#">ABOUT ME</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div> 
</body>

Und die CSS

@media and (max-device-width:500px) { 
    .intro { 
     background-color: #f2f2f2; 
     height: 400px; 
    } 

    .intro .menu li { 
     display: inline-block; 

    } 

    .intro .menu li a { 
     font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; 
     color: #fff; 
    } 
}

Quelle

2017-05-26 Nelson

entfernen 'und' von' @media und (max-device-width: 500px) { ' –

Wenn Sie mit Medienanfragen üben, kann ich schlage vor, mit' max-width' statt 'max-Gerät -width ", damit Sie sehen können, was passiert, wenn Sie die Größe des Fensters mit der Maus ändern. –

'max-device-width' ist veraltet, verwenden Sie 'max-width' – LGSon

Remove "und" aus dem Code müssen Sie wie folgt verwenden: -

@media only screen and (max-width: 500px){ 

}

Ihre Medienabfrage nur für den spezifischen Browser wie Safari und Opera verwenden.

@media only screen and (max-device-width:500px){ 

}

Quelle

2017-05-27 04:59:22

Meine Medienabfragen funktionieren nicht und ich weiß nicht warum. Es ist mein erstes Mal mit Medienabfragen

Antwort

Verwandte Themen