Ερωτήματα μέσων ενημέρωσης: Πώς να στοχεύσετε σε desktop, tablet και κινητά;

Έχω κάνει κάποια έρευνα σχετικά με τα ερωτήματα πολυμέσων και εξακολουθώ να μην καταλαβαίνω πώς να στοχεύω συσκευές συγκεκριμένων μεγεθών.

Θέλω να μπορώ να στοχεύσω σε επιτραπέζια, tablet και κινητά. Γνωρίζω ότι θα υπάρξουν κάποιες αποκλίσεις, αλλά θα ήταν ωραίο να υπάρχει ένα γενικό σύστημα που να μπορεί να χρησιμοποιηθεί για τη στόχευση αυτών των συσκευών.

Μερικά παραδείγματα που έχω βρει:

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

Ή:

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

Ποια πιστεύετε ότι πρέπει να είναι αυτά τα 'σημεία διακοπής' για κάθε συσκευή;

Quantastical
Επεξεργασμένη ερώτηση Κάνε Μάιος 2013 в 1:06
Προγραμματισμός
css3 css mobile tablet media-queries
Κάνε Ιούνιος 2011 в 10:57
14 προβολές
Λύση

ΙΜΟ αυτά είναι τα καλύτερα σημεία διακοπής:

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

Επεξεργασία: 960:

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

Στην πράξη, πολλοί σχεδιαστές μετατρέπουν τα εικονοστοιχεία σε ems, κυρίως επειδή τα ems επιτρέπουν καλύτερα το ζουμ. Στο τυπικό ζουμ 1em === 16px. Πολλαπλασιάστε τα εικονοστοιχεία επί 1em/16px για να λάβετε τα ems. Για παράδειγμα, 320px === 20em.

Σε απάντηση στο σχόλιο, το min-width είναι τυπικό στη σχεδίαση "mobile-first", όπου ξεκινάτε με τη σχεδίαση για τις μικρότερες οθόνες σας, και στη συνέχεια προσθέτετε συνεχώς αυξανόμενα ερωτήματα μέσων, δουλεύοντας σε όλο και μεγαλύτερες οθόνες. Ανεξάρτητα από το αν προτιμάτε το min-, το max- ή συνδυασμούς αυτών, να έχετε υπόψη σας τη σειρά των κανόνων σας, έχοντας κατά νου ότι αν πολλαπλοί κανόνες ταιριάζουν στο ίδιο στοιχείο, οι μεταγενέστεροι κανόνες θα υπερισχύουν των προηγούμενων.

ryanve
Επεξεργασμένη απάντηση Κάνε Ιούνιος 2017 в 5:22
Σχόλια (16)

Αν θέλετε να στοχεύσετε σε μια συσκευή, τότε απλά γράψτε min-device-width. Για παράδειγμα:

Για iPhone

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

Για tablet

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

Εδώ υπάρχουν μερικά καλά άρθρα:

Fizzix
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2014 в 5:13
Σχόλια (10)

  1. Χρησιμοποίησα αυτόν τον ιστότοπο για να βρω την ανάλυση και να αναπτύξω CSS ανά πραγματικούς αριθμούς. Οι αριθμοί μου διαφέρουν αρκετά από τις παραπάνω απαντήσεις, εκτός από το ότι το δικό μου CSS χτυπάει πραγματικά τις επιθυμητές συσκευές.

  2. Επίσης, να έχετε αυτό το κομμάτι κώδικα εντοπισμού σφαλμάτων αμέσως μετά το ερώτημα media σας π.χ:

    @media only screen and (min-width: 769px) and (max-width: 1281px) {
  /* για οθόνες tablet 10 ιντσών */
  body::before {
    content: "tablet to some desktop media query (769 > 1281) fired",
    font-weight: bold,
    display: block,
    text-align: center,
    background: rgba(255, 255, 0, 0.9); /* Ημι-διαφανές κίτρινο */
    position: absolute,
    top: 0;
    left: 0,
    δεξιά: 0,
    z-index: 99;
  }
}

Προσθέστε αυτό το στοιχείο εντοπισμού σφαλμάτων σε κάθε ερώτημα πολυμέσων και θα δείτε ποιο ερώτημα έχει εφαρμοστεί.

loxsat
Επεξεργασμένη απάντηση Κάνε Ιανουάριος 2019 в 10:25
Σχόλια (0)