Σημεία διάσπασης του Bootstrap 3 και ερωτήματα πολυμέσων

Στο Bootstrap 3 media queries documentation αναφέρεται:

Χρησιμοποιούμε τα ακόλουθα ερωτήματα πολυμέσων στα αρχεία Less για να δημιουργήσουμε τα βασικά σημεία διακοπής στο σύστημα πλέγματος. &gt,

Πολύ μικρές συσκευές (τηλέφωνα, λιγότερο από 768px): Δεν υπάρχει ερώτημα πολυμέσων, καθώς αυτό είναι το προεπιλεγμένο στο Bootstrap &gt, Μικρές συσκευές (tablet, 768px και άνω): @media (min-width: @screen-sm-min) { ... } &gt, Μεσαίες συσκευές (επιτραπέζιοι υπολογιστές, 992px και άνω): @media (min-width: @screen-md-min) { ... } &gt, Μεγάλες συσκευές (μεγάλοι επιτραπέζιοι υπολογιστές, 1200px και άνω): @media (min-width: @screen-lg-min) { ... }

Υποτίθεται ότι μπορούμε να χρησιμοποιήσουμε τα ονόματα @screen-sm, @screen-md και @screen-lg και στα ερωτήματα πολυμέσων; Επειδή δεν δουλεύει για μένα. Πρέπει να χρησιμοποιήσω μετρήσεις εικονοστοιχείων όπως @media (min-width: 768px) {...} για να λειτουργήσει. Μήπως κάνω κάτι λάθος;

Επίσης, είναι τυπογραφικό λάθος η αναφορά σε 480px για πολύ μικρές συσκευές; Δεν θα έπρεπε να λέει μέχρι 767px; (αφού αφαιρέθηκε από την τεκμηρίωση)

Dave Powers
Επεξεργασμένη ερώτηση Κάνε Ιούλιος 2019 в 9:19
Προγραμματισμός
twitter-bootstrap-3 twitter-bootstrap breakpoints media-queries
Κάνε Οκτώβριος 2013 в 2:46
17 προβολές

Το Bootstrap δεν τεκμηριώνει πολύ καλά τα ερωτήματα πολυμέσων. Αυτές οι μεταβλητές @screen-sm, @screen-md, @screen-lg αναφέρονται στην πραγματικότητα σε μεταβλητές LESS και όχι σε απλό CSS.

Όταν προσαρμόζετε το Bootstrap, μπορείτε να αλλάξετε τα σημεία διακοπής των ερωτημάτων πολυμέσων και όταν μεταγλωττίζεται, οι μεταβλητές @screen-xx αλλάζουν σε όποιο πλάτος pixel ορίσατε ως screen-xx. Με αυτόν τον τρόπο ένα τέτοιο πλαίσιο μπορεί να κωδικοποιηθεί μία φορά και στη συνέχεια να προσαρμοστεί από τον τελικό χρήστη για να ταιριάζει στις ανάγκες του.

Μια παρόμοια ερώτηση εδώ που μπορεί να παρέχει περισσότερη σαφήνεια: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries

Στα CSS σας, θα πρέπει να χρησιμοποιήσετε ακόμα τα παραδοσιακά ερωτήματα media για να παρακάμψετε ή να προσθέσετε σε αυτό που κάνει το Bootstrap.

Όσον αφορά τη δεύτερη ερώτησή σας, δεν πρόκειται για τυπογραφικό λάθος. Μόλις η οθόνη πέσει κάτω από τα 768px, το πλαίσιο γίνεται εντελώς ρευστό και αλλάζει το μέγεθος σε οποιοδήποτε πλάτος συσκευής, καταργώντας την ανάγκη για breakpoints. Το σημείο διακοπής στα 480px υπάρχει επειδή υπάρχουν συγκεκριμένες αλλαγές που συμβαίνουν στη διάταξη για τη βελτιστοποίηση για κινητά.

Για να το δείτε αυτό στην πράξη, μεταβείτε σε αυτό το παράδειγμα στον ιστότοπό τους (http://getbootstrap.com/examples/navbar-fixed-top/) και αλλάξτε το μέγεθος του παραθύρου σας για να δείτε πώς αντιμετωπίζει το σχεδιασμό μετά τα 768px.

Community
Επεξεργασμένη απάντηση Κάνε Μάιος 2017 в 10:31
Σχόλια (2)

Το θέμα αυτό έχει συζητηθεί στο https://github.com/twbs/bootstrap/issues/10203. Μέχρι τώρα, δεν υπάρχει σχέδιο αλλαγής του Grid για λόγους συμβατότητας.

Μπορείτε να πάρετε το Bootstrap από αυτό το fork, κλάδος hs: https://github.com/antespi/bootstrap/tree/hs

Αυτός ο κλάδος σας δίνει ένα επιπλέον σημείο διακοπής στα 480px, οπότε πρέπει να:

  1. Σχεδιάστε πρώτα για κινητά (XS, λιγότερο από 480px)
  2. Προσθέστε κλάσεις HS (Οριζόντιες μικρές συσκευές) στην HTML σας: col-hs-*, visible-hs, ... και σχεδιάστε για οριζόντιες κινητές συσκευές (HS, λιγότερο από 768px)
  3. Σχεδιάστε για συσκευές tablet (SM, λιγότερο από 992px)
  4. Σχεδιασμός για επιτραπέζιες συσκευές (MD, λιγότερο από 1200px)
  5. Σχεδιασμός για μεγάλες συσκευές (LG, πάνω από 1200px)

Ο σχεδιασμός πρώτα για κινητά είναι το κλειδί για την κατανόηση του Bootstrap 3. Αυτή είναι η σημαντικότερη αλλαγή από το BootStrap 2.x. Ως πρότυπο κανόνα μπορείτε να ακολουθήσετε αυτό (σε LESS):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}
Dave Powers
Επεξεργασμένη απάντηση Κάνε Ιούλιος 2019 в 1:52
Σχόλια (4)

Η αναφορά στα 480px έχει αφαιρεθεί. Αντ' αυτού λέει:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Δεν υπάρχει σημείο διακοπής κάτω από 768px στο Bootstrap 3.

Αν θέλετε να χρησιμοποιήσετε το @screen-sm-min και άλλα mixins τότε θα πρέπει να μεταγλωττίσετε με το LESS, δείτε http://getbootstrap.com/css/#grid-less.

Εδώ'είναι ένα σεμινάριο για το πώς να χρησιμοποιήσετε το Bootstrap 3 και το LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Σχόλια (0)