To może brzmieć jak głupie pytanie.
Jeśli użyję tego fragmentu kodu CSS do zwykłych wyświetlaczy (gdzie box-bg.png
jest 200 na 200 pikseli);
.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}
i jeśli użyję takiego zapytania o media, aby skierować reklamy na wyświetlacze siatkówki (z obrazem @ 2x jako wersją o wysokiej rozdzielczości);
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/[email protected]') no-repeat top left;}
}
Czy muszę podwoić rozmiar elementu .box
div do 400 na 400 pikseli, aby dopasować go do nowego obrazu tła w wysokiej rozdzielczości?
css
responsive-design
media-queries
Dean Elliott
źródło
źródło
Odpowiedzi:
Nie, ale musisz ustawić
background-size
właściwość tak, aby pasowała do oryginalnych wymiarów:EDYTOWAĆ
Aby dodać trochę więcej do tej odpowiedzi, oto zapytanie wykrywania siatkówki, którego zwykle używam:
- Źródło
NB. To
min--moz-device-pixel-ratio:
nie jest literówka. Jest to dobrze udokumentowany błąd występujący w niektórych wersjach przeglądarki Firefox i powinien być napisany w ten sposób, aby obsługiwał starsze wersje (starsze niż Firefox 16). - ŹródłoJak @LiamNewmarch wspomniał w komentarzach poniżej, możesz dołączyć
background-size
skróconąbackground
deklarację w następujący sposób:Jednak osobiście nie radziłbym używać formy skróconej, ponieważ nie jest obsługiwana w systemie iOS <= 6 lub Android, przez co jest zawodna w większości sytuacji.
źródło
background-size: cover;
. Pozwoli to zachować proporcje, jednocześnie „pokrywając” całe tło obrazem.background-size
własność Into thebackground
tak:background: url('images/[email protected]') no-repeat top left / 200px 200px
. Pamiętaj, że przeglądarki, które nie obsługująbackground-size
, zignorują tę regułę.Oto rozwiązanie, które obejmuje również urządzenia o wysokiej (er) DPI ( MDPI ) > ~ 160 punktów na cal, na przykład kilka urządzeń innych niż iOS (np. Google Nexus 7 2012 ):
Jak zamieścił @ 3rror404 w swojej edycji po otrzymaniu opinii od komentarzy, świat wykracza poza Webkit / iPhone. Jedną rzeczą, która wprawia mnie w zakłopotanie w przypadku większości rozwiązań dostępnych do tej pory, takich jak to, o którym mowa powyżej jako źródło w CSS-Tricks , jest to, że nie jest to w pełni brane pod uwagę. Oryginalne źródło
poszedł już dalej.
Jako przykład Nexus 7 (2012) ekran jest ekranem TVDPI z dziwne
device-pixel-ratio
z1.325
. Podczas ładowania obrazów w normalnej rozdzielczości są one przeskalowywane w górę przez interpolację, a zatem są rozmazane. Dla mnie zastosowanie tej reguły w zapytaniu o media, aby uwzględnić te urządzenia, pozwoliło uzyskać najlepsze opinie klientów.źródło
@2x
tylko obsługi2dppx
+ klientów.Jeśli planujesz użyć tego samego obrazu dla siatkówki i ekranu bez siatkówki, oto rozwiązanie. Powiedzmy, że masz obraz
200x200
i dwie ikony w górnym rzędzie i dwie ikony w dolnym rzędzie. Więc to cztery ćwiartki.Skalowanie i pozycjonowanie ikon duszków do 50% wartości rzeczywistej, możesz uzyskać oczekiwany rezultat.
Kolejne przydatne rozwiązanie do mieszania SCSS autorstwa Ryana Benhase'a .
Więcej informacji na temat powyższej mieszanki CZYTAJ TUTAJ .
źródło