Als «media-queries» getaggte Fragen

Medienabfragen ermöglichen die bedingte Anwendung von CSS-Stilen basierend auf Medientypen wie Bildschirm und Druck sowie den Bedingungen von Medienfunktionen wie Ansichtsfenster und Gerätehöhe und -breite. Sie sind Teil der W3C CSS3-Spezifikation.

4
Medienabfragen - Zwischen zwei Breiten
Ich versuche, CSS3-Medienabfragen zu verwenden, um eine Klasse zu erstellen, die nur angezeigt wird, wenn die Breite größer als 400 Pixel und kleiner als 900 Pixel ist. Ich weiß, dass dies wahrscheinlich sehr einfach ist und mir etwas Offensichtliches fehlt, aber ich kann es nicht herausfinden. Was ich mir ausgedacht …
141 css  media-queries 
11
iPhone 5 CSS-Medienabfrage
Das iPhone 5 hat einen längeren Bildschirm und erfasst nicht die mobile Ansicht meiner Website. Was sind die neuen Responsive Design-Abfragen für das iPhone 5 und kann ich sie mit vorhandenen iPhone-Abfragen kombinieren? Meine aktuelle Medienabfrage lautet: @media only screen and (max-device-width: 480px) {}
11
Holen Sie sich die Gerätebreite in Javascript
Gibt es eine Möglichkeit, die Gerätebreite des Benutzers im Gegensatz zur Breite des Ansichtsfensters mithilfe von Javascript zu ermitteln? CSS-Medienabfragen bieten dies, wie ich sagen kann @media screen and (max-width:640px) { /* ... */ } und @media screen and (max-device-width:960px) { /* ... */ } Dies ist nützlich, wenn ich …
7
Verwenden von Sass-Variablen mit CSS3-Medienabfragen
Ich versuche, die Verwendung einer Sass-Variablen mit @ media-Abfragen wie folgt zu kombinieren: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width wird dann an verschiedenen Stellen in den prozentualen Messungen der Stylesheet-Breite definiert, um Fluid-Layouts zu erstellen. Wenn ich das mache, scheint …
3
Retina-Displays, hochauflösende Hintergrundbilder
Das klingt vielleicht nach einer dummen Frage. Wenn ich dieses CSS-Snippet für normale Anzeigen verwende (wobei box-bg.png200 x 200 Pixel groß sind); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } und wenn ich eine Medienabfrage wie diese verwende, um auf Retina-Displays abzuzielen (wobei das @ 2x-Bild die hochauflösende Version ist); …
5
Emulationsmedienabfragen im Chrome-Gerätemodus funktionieren nicht
Aus irgendeinem Grund liest der Geräteemulationsmodus meine Medienabfragen nicht. Es funktioniert auf anderen Websites, einschließlich meiner eigenen Websites, die ich mit Bootstrap erstellt habe, aber nicht auf Medienabfragen, die ich von Grund auf verwende (durch Klicken auf die Schaltfläche Medienabfragen wird die Schaltfläche blau, es werden jedoch keine Medienabfragen angezeigt). …
11
Bootstrap - Entfernen von Polstern oder Rändern, wenn die Bildschirmgröße kleiner ist
EDITED: Vielleicht sollte ich fragen, welcher Selektor die Seitenpolsterung einrichtet, wenn der Bildschirm auf unter 480px Breite reduziert wird? Ich habe eine Weile in bootstrap-responsiveness.css gesucht, um dies zu finden, aber nichts scheint dies zu beeinflussen. Original Ich möchte grundsätzlich alle Standardauffüllungen oder Ränder entfernen, die für die Reaktionsfähigkeit auf …
6
Erweitern von Selektoren aus Medienabfragen mit Sass
Ich habe eine Artikelklasse und eine kompakte "Modifikator" -Klasse: .item { ... } .item.compact { /* styles to make .item smaller */ } Das ist in Ordnung. Ich möchte jedoch eine @mediaAbfrage hinzufügen , die die .itemKlasse dazu zwingt , kompakt zu sein, wenn der Bildschirm klein genug ist. Auf …
3
Soll ich die maximale Gerätebreite oder die maximale Breite verwenden?
Mit CSS-Medienabfragen können Sie max-device-widtheine Gerätebreite (z. B. ein iPhone oder ein Android-Gerät) und / oder eine max-widthGerätebreite festlegen. Wenn Sie max-device-widthdie Größe des Browserfensters auf Ihrem Desktop ändern, ändert sich das CSS nicht, da sich die Größe Ihres Desktops nicht ändert. Wenn Sie max-widthdie Größe des Browserfensters auf Ihrem …
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.