Das klingt vielleicht nach einer dummen Frage.
Wenn ich dieses CSS-Snippet für normale Anzeigen verwende (wobei box-bg.png
200 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);
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/[email protected]') no-repeat top left;}
}
Muss ich die Größe des .box
Div auf 400 x 400 Pixel verdoppeln, um dem neuen hochauflösenden Hintergrundbild zu entsprechen?
css
responsive-design
media-queries
Dean Elliott
quelle
quelle
Antworten:
Nein, aber Sie müssen die
background-size
Eigenschaft so einstellen , dass sie mit den ursprünglichen Abmessungen übereinstimmt:BEARBEITEN
Um dieser Antwort ein wenig mehr hinzuzufügen, hier die Abfrage zur Erkennung der Netzhaut, die ich normalerweise verwende:
- Quelle
NB. Dies
min--moz-device-pixel-ratio:
ist kein Tippfehler. Es ist ein gut dokumentierter Fehler in bestimmten Versionen von Firefox und sollte so geschrieben werden, um ältere Versionen (vor Firefox 16) zu unterstützen. - QuelleWie @LiamNewmarch in den Kommentaren unten erwähnt hat, können Sie Folgendes
background-size
in Ihre Kurzschrift aufnehmenbackground
:Ich persönlich würde jedoch nicht empfehlen, das Kurzformular zu verwenden, da es in iOS <= 6 oder Android nicht unterstützt wird, was es in den meisten Situationen unzuverlässig macht.
quelle
background-size: cover;
. Dadurch bleibt das Seitenverhältnis erhalten, während der gesamte Hintergrund mit Bild "bedeckt" wird.background-size
Eigenschaft wie folgt in Folgendes integrierenbackground
:background: url('images/[email protected]') no-repeat top left / 200px 200px
. Beachten Sie, dass Browser, die dies nicht unterstützenbackground-size
, diese Regel ignorieren.Hier ist eine Lösung, die auch MDPI- Geräte (High (er) DPI ) > ~ 160 Punkte pro Zoll enthält, wie einige Nicht-iOS-Geräte (z. B. Google Nexus 7 2012 ):
Da @ 3rror404 in seiner Bearbeitung enthalten ist, nachdem er Feedback von den Kommentaren erhalten hat, gibt es eine Welt jenseits von Webkit / iPhone. Eine Sache, die mich bei den meisten Lösungen stört, wie die oben bei CSS-Tricks als Quelle angegebene , ist, dass dies nicht vollständig berücksichtigt wird.
Die ursprüngliche Quelle ging bereits weiter.
Als Beispiel ist der Nexus 7 (2012) Bildschirm ein TVDPI-Bildschirm mit einem seltsamen
device-pixel-ratio
von1.325
. Wenn die Bilder mit normaler Auflösung geladen werden, werden sie durch Interpolation hochskaliert und sind daher unscharf. Für mich war es das beste Kundenfeedback, diese Regel in die Medienabfrage anzuwenden, um diese Geräte einzubeziehen.quelle
@2x
nur an2dppx
+ Kunden bedient zu werden .Wenn Sie vorhaben, dasselbe Bild für Retina- und Nicht-Retina-Bildschirme zu verwenden, finden Sie hier die Lösung. Angenommen, Sie haben ein Bild von
200x200
und zwei Symbole in der oberen Reihe und zwei Symbole in der unteren Reihe. Es sind also vier Quadranten.Wenn Sie die Sprite-Symbole auf 50% über dem tatsächlichen Wert skalieren und positionieren, erhalten Sie das erwartete Ergebnis.
Eine weitere praktische SCSS-Mixin-Lösung von Ryan Benhase .
Weitere Informationen zum obigen Mixin finden Sie HIER .
quelle