Medieforespørgsler: Hvordan målretter man desktop, tablet og mobil?

Jeg har forsket lidt i media queries, og jeg forstår stadig ikke helt, hvordan man kan målrette enheder af bestemte størrelser.

Jeg ønsker at kunne målrette desktop, tablet og mobil. Jeg ved, at der vil være nogle forskelle, men det ville være rart at have et generisk system, der kan bruges til at målrette disse enheder.

Nogle eksempler jeg har fundet:

# 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)

Eller:

# 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)

Hvad mener du, at disse 'breakpoints' bør være for hver enhed?

Quantastical
Redigeret spørgsmål 2013ør maj 2013 в 1:06
Programmering
css3 css mobile tablet media-queries
2011ør juni 2011 в 10:57
23 visninger
Løsning

IMO er det de bedste holdepunkter:

@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 */ }

Rediger: Forfinet til at fungere bedre med 960 gitter:

@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 */ }

I praksis konverterer mange designere pixels til ems, især fordi ems giver bedre mulighed for at zoome. Ved standard zoom 1em === 16px. Multiplicer pixels med 1em/16px for at få ems. For eksempel: 320px === 20em.

Som svar på kommentaren er min-width standard i "mobile-first" design, hvor man starter med at designe til de mindste skærme og derefter tilføjer stadigt stigende media queries, så man arbejder sig frem til større og større skærme. Uanset om du foretrækker min-, max- eller kombinationer heraf, skal du være opmærksom på rækkefølgen af dine regler og huske på, at hvis flere regler passer til det samme element, vil de senere regler tilsidesætte de tidligere regler.

ryanve
Redigeret svar 2017ør juni 2017 в 5:22
Kommentarer (16)

Hvis du ønsker at målrette en enhed, skal du blot skrive min-device-width. For eksempel:

Til iPhone

@media only screen and (min-device-width: 480px){}

Til tablets

@media only screen and (min-device-width: 768px){}

Her er nogle gode artikler:

Fizzix
Redigeret svar 2014ør marts 2014 в 5:13
Kommentarer (10)

  1. Jeg har brugt dette websted til at finde opløsningen og udviklet CSS efter faktiske tal. Mine tal varierer en del fra ovenstående svar, bortset fra at min CSS faktisk rammer de ønskede enheder.

  2. Hav også dette debugging stykke kode lige efter dit media query f.eks:

    @media only screen and (min-width: 769px) and (max-width: 1281px) {
  /* for 10 tommer tablet-skærme */
  body::before {
    content: "tablet til nogle desktop media query (769 > 1281) fired";
    font-weight: fed;
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0, 0.9); /* Semi-transparent gul */
    position: absolut;
    top: 0;
    venstre: 0;
    højre: 0;
    z-index: 99;
  }
}

Tilføj dette debugging-element i hver enkelt media query, og du vil se, hvilken forespørgsel der er anvendt.

loxsat
Redigeret svar 2019ør januar 2019 в 10:25
Kommentarer (0)