Ik heb wat onderzoek gedaan naar media queries en ik begrijp nog steeds niet helemaal hoe ik apparaten van bepaalde afmetingen kan targeten.
Ik wil desktop, tablet en mobiel kunnen targeten. Ik weet dat er wat verschillen zullen zijn, maar het zou fijn zijn om een generiek systeem te hebben dat gebruikt kan worden om deze apparaten te targeten.
Enkele voorbeelden die ik heb gevonden:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Of:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
Wat denk je dat deze 'breakpoints' moeten zijn voor elk apparaat?
IMO zijn dit de beste breekpunten:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit: Verfijnd om beter te werken met 960 roosters:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
In de praktijk zetten veel ontwerpers pixels om in ems, vooral omdat ems het zoomen beter mogelijk maken. Bij standaard zoom 1em === 16px
. Vermenigvuldig pixels met 1em/16px
om ems te krijgen. Bijvoorbeeld, 320px == 20em
.
In antwoord op de opmerking, min-breedte
is standaard in "mobile-first" design, waarbij je begint met het ontwerpen voor de kleinste schermen, en dan steeds grotere media queries toevoegt, om zo uit te komen op steeds grotere schermen. Ongeacht of je de voorkeur geeft aan min-
, max-
, of combinaties daarvan, wees je bewust van de volgorde van je regels, in gedachten houdend dat als meerdere regels overeenkomen met hetzelfde element, de latere regels de eerdere regels zullen overrulen.
Als je een apparaat wilt targeten, schrijf dan min-device-width
. Bijvoorbeeld:
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
Hier zijn enkele goede artikelen:
Ik heb deze site gebruikt om de resolutie te vinden en CSS ontwikkeld per werkelijke getallen. Mijn getallen verschillen nogal van de bovenstaande antwoorden, behalve dat de mijn CSS daadwerkelijk de gewenste apparaten raakt.
Ook, heb dit debugging stukje code direct na uw media query bijv:
@media only screen and (min-width: 769px) and (max-width: 1281px) {
/* voor 10 inch tablet schermen */
body::before {
content: "tablet naar sommige desktop media query (769 > 1281) ontslagen";
font-weight: vet;
weergave: blok;
tekst-uitlijning: midden;
achtergrond: rgba(255, 255, 0, 0.9); /* semitransparant geel */
positie: absoluut;
top: 0;
links: 0;
rechts: 0;
z-index: 99;
}
}
Voeg dit debugging item toe in elke media query en je zult zien welke query is toegepast.