1. Zuhause
  2. Frage und Antwort
  3. CSS: Wie ändert Youtube sein Aussehen basierend auf der Bildschirmgröße?

CSS: Wie ändert Youtube sein Aussehen basierend auf der Bildschirmgröße?

2016-09-17 2 views
-1

Ich bin daran interessiert, wie Youtube das Aussehen auf der Bildschirmgröße ändert, ohne JavaScript zu verwenden.CSS: Wie ändert Youtube sein Aussehen basierend auf der Bildschirmgröße?

Versuchen Sie es selbst: gehen Sie zu youtube und werfen Sie einen Blick auf die Navbar, wenn die Fenstergröße kleiner als 700px das Logo ändert.

Dies funktioniert auch mit deaktiviertem JavaScript.

Ich inspiziert die Ressourcen der HTML-CSS-Dateien der Seite, konnte aber nicht herausfinden, wie youtube es tut.

Wenn jemand den Trick kennt oder eine Vermutung hat - bitte antworte.

Quelle

2016-09-17 MrSunshine

+2

lookup css media abfragen – mlegg

Antwort

0

Sie mediaqueries eine CSS3-Funktion verwenden, die auf Responsive Design verwandt ist, diese ermöglichen es Ihnen, in der Größe (bekannt als Stützpunkte) der Browser die Webseite machen sollte definieren mit einem anderen Satz von CSS-Eigenschaften.

Wenn Sie eine Website mit folgendem CSS-Stylesheet

body { 
    background: black; 
} 

@media (max-width: 600px) { 
    body { 
    background: gold; 
    } 
}

Erklärung haben: Wenn der Browser oder Bildschirmbreite ist über 600px, der Körper Hintergrund sollte schwarz sein. Falls der Browser oder der Bildschirm weniger als 600 Pixel breit ist, sollte der Hintergrund des Körpers goldfarben sein.

body { 
 
    background: black; 
 
} 
 
h1 { 
 
    color: white; 
 
} 
 

 
@media (max-width: 600px) { 
 
    body { 
 
    background: gold; 
 
    } 
 
    h1 { 
 
    color: red; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
</head> 
 
<body> 
 
\t <h1>Demonstration</h1> 
 
</body> 
 
</html>

:) Prost.

Quelle

2016-09-17 19:55:53

Verwandte Themen

 Verwandte Themen