Kann jemand bitte CSS-Medienabfragen erklären?

Question

Ich las den Artikel über sie bei css3.info, aber ich hatte nicht das Gefühl, es erklärte es gut genug. Ich konnte ihre Beispiele auch nicht mit meiner Bildschirmgröße ändern. Ich habe in Safari, FF, Chrome versucht.

Ist das ein Feature, das noch nicht bereit für die Implementierung ist?

Wenn ich einige Stile anpassen möchte, wenn das Browserfenster weniger als 1024 px breit ist. Wie kann ich das machen?

Answer 1

Die an die Bildschirmgröße angewandt Regel bedeutet, dass, unter Berufung auf W3C spec „auf dem Bildschirm, und Handheld-Geräte verwendbar ist, wenn die Breite des Ansichtsfensters ist“ in den angegebenen Einschränkungen.

http://www.w3.org/TR/css3-mediaqueries/

Wenn Sie den Stil anpassen möchten, wenn das Ansichtsfenster kleiner als 1024px Sie diese Regel verwenden kann:

@media screen and (max-width: 1024px) { … } 

ohnehin diese Regel gilt nur für die Darstellungs tatsächliche Größe. Wenn Sie die Größe des Ansichtsfensters ändern, ohne die Seite neu zu laden, werden die Stile nicht angewendet.

Answer 2

Um einen Stylesheet auf ein Dokument anwenden, wenn sie auf einen Bildschirm größer als 800 Pixel breit angezeigt:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" > 

Um einen Stylesheet auf ein Dokument anwenden, wenn auf jedes Gerät weniger als 400 Pixel breit angezeigt:

<link rel="stylesheet" media="all and (max-device-width: 400px)" > 

innen

@media all and (max-width:800px) { 
    body { color: red; } 
} 

für iphone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

:: combining media query

Answer 3

Um zu sehen, wie verschiedene Medien-Anfragen auf Resize oder Orientierungsänderung reagieren, versuchen Sie die Demo auf dieser Seite:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Sie die Abfrage Medien anpassen kann Attribute, die ein Gefühl dafür zu bekommen, wie sie eine Seite beeinflussen .

Answer 4

Hier sind ein paar Projekte, die dieses Problem und sind an der Spitze der dynamischen CSS und Bildschirmgrößen lösen:

• 320 and up:

  '320 und Up' verhindert, dass mobile Geräte aus Herunterladen von Desktop-Assets von mit einem winzigen Bildschirm Stylesheet als seinen Ausgangspunkt.

• Lessframework:

  Weniger Framework ist ein CSS Grid-System für adaptive Gestaltung von Websites.Es enthält enthält 4 Layouts und 3 Sätze von Typografie-Voreinstellungen, die alle auf einem einzelnen Raster basieren.