Δημιουργία προσαρμοστικών διατάξεων χωρίς ερωτήματα πολυμέσων

Sep 15, 2025

πως να

Για μεγάλο χρονικό διάστημα προσπαθούσα να φτάσω σε μια τέλεια οπτική σύνθεση σε ιστοσελίδες. Έχω πολύ πόνο με τα CSS Breakpoints στην καθημερινή μου δουλειά και δεν ήταν ποτέ ικανοποιημένος από τους κοινούς τρόπους χειρισμού της ανταποκρινόμενης διάταξης. Πρόσφατα, ανακάλυψα ένα πολύ δροσερό σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές τέχνασμα που κάνει τα πάντα απλά, συνεπή και λογικά, και είμαι πρόθυμος να το μοιραστώ μαζί σας.

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

Δημιουργήστε ένα blog με το πλέγμα και το flexbox

Ο παραδοσιακός τρόπος

Adaptive layouts: breakpoints — Τα σημεία διακοπής μπορούν να οδηγήσουν σε μη ικανοποιητικά αποτελέσματα για μη τυποποιημένα προβολές

Οι φορητές συσκευές αναλαμβάνουν τον κόσμο. Μια ποικιλία από όλα τα είδη συσκευών αλλάζουν τον τρόπο που δημιουργούμε ιστοσελίδες. Με τον τίτλο «Ένας ανταποκρινόμενος ιστότοπος» οι περισσότεροι άνθρωποι αναλαμβάνουν μόνο επιτραπέζιους και κινητές εκδόσεις (μερικές φορές επιφάνεια εργασίας, tablet, κινητό). Έτσι λειτουργεί παραδοσιακά:

 H1 {
Μέγεθος γραμματοσειράς: 80px;
}
.Container {
Πλάτος: 980px;
Περιθώριο: 0 Auto;
}

@media (μέγιστο πλάτος: 1023px) {
h1 {
Μέγεθος γραμματοσειράς: 48px;
}
.Container {
Πλάτος: Αυτόματη;
Padding: 0 30px;
}
}

Στην πραγματικότητα, συνήθως το Διάταξη ιστότοπου Βλέπουμε δεν γίνεται για τη συσκευή μας. Για παράδειγμα, ας δούμε πώς προσαρμόζουμε το μέγεθος της γραμματοσειράς του & Lt; H1 & GT; τίτλος:

Adaptive layouts — Με ένα μόνο σημείο διακοπής μπορείτε να καταλήξετε με τα περίεργα μεγέθη σημείων

Βλέπετε, το & lt; h1 & gt; Ο τίτλος έχει "μέγεθος γραμματοσειράς: 48px" στη συσκευή πλάτους 320px και 800px και "μέγεθος γραμματοσειράς: 80px" στις 1024px και 2560px.

Φυσικά, μπορούμε να προσθέσουμε περισσότερα σπασμούς, αλλά ο αριθμός των διαφορετικών συσκευών είναι αμέτρητες! Αυτό θα κάνει προδιαγραφές σχεδιασμού πολύ περίπλοκη και συγκεχυμένη, επειδή είναι δύσκολο να γνωρίζετε ποια τιμή εφαρμόζεται στην οποία η οθόνη.

Adaptive layouts: font size — Ποτέ δεν μπορείτε να δημιουργήσετε αρκετά σημεία διακοπής για να πάρετε το μέγεθος της γραμματοσειράς τέλεια σε κάθε οθόνη

Αυτό που πραγματικά χρειαζόμαστε είναι αυτό:

Μονάδες προβολής

Adaptive layouts: viewpoint units — Οι μονάδες προβολής βελτιώνουν τα θέματα, αλλά χρειάζονται ακόμα εργασία

Η λύση αυτού του προβλήματος περιλαμβάνει μονάδες προβολής VW και VH. Αυτές είναι μονάδες μήκους που αντιπροσωπεύουν το 1 / 100ο του πλάτους / ύψους του προβολής (που υποστηρίζεται ευρέως από τα προγράμματα περιήγησης από το IE9 +).

Μπορούμε να τα χρησιμοποιήσουμε για να ρυθμίσουμε τις ιδιότητες μιας ιστοσελίδας ανάλογα με το μέγεθος του. Η κατάσταση θα πάρει λίγο καλύτερα, αλλά ο πόνος εξακολουθεί να είναι ο ίδιος:

 H1 {
Μέγεθος γραμματοσειράς: Calc ((80/1920) * 100VW;
}
.Container {
Πλάτος: 80VW;
Περιθώριο: 0 Auto;
}

@media (μέγιστο πλάτος: 1023px) {
h1 {
Μέγεθος γραμματοσειράς: Calc ((48/375) * 100VW;
}
.Container {
Πλάτος: 90VW;
}
}

Ποτέ δεν ξέρουμε αν είναι πολύ μεγάλο ή πολύ μικρό.

Πώς μπορούμε να οικοδομήσουμε ένα True-Adaptive σύστημα διάταξης; Πώς σχεδιάζουμε έναν ευαίσθητο ιστότοπο που λειτουργεί εγγενώς από 320px έως 2560px;

Στην ιδανική περίπτωση, το mockup σας θα πρέπει να εξηγήσει τη λογική πίσω από τη διάταξη και πώς προσαρμόζεται από μικρότερη ανάλυση σε μεγαλύτερο:

Η λύση

Adaptive layouts: solution — Εδώ είναι πώς να κάνετε ένα πραγματικά προσαρμοστικό σύστημα διάταξης

Θέλουμε να προσαρμόσουμε συνεχώς τις ιδιότητες από μια μικρή οθόνη σε ένα μεγάλο. Δεν υπάρχουν σημεία διακοπής και δεν υπάρχουν ερωτήματα πολυμέσων. Αυτό που θέλουμε είναι μία μόνο τιμή που λειτουργεί για κάθε οθόνη.

Μια λειτουργία μαθηματικών με δύο μεταβλητές είναι το κλειδί. Για παράδειγμα, αν θέλουμε να προσαρμόσουμε ένα μέγεθος γραμματοσειράς τίτλου, η λειτουργία θα πρέπει να μοιάζει με αυτό:

1920x + y = 80
375x + y = 48

1920 - Προεπιλεγμένο πλάτος επιφάνειας εργασίας σε μακέτα σχεδιασμού (ισούται με 100VW)
375 - Προεπιλεγμένο κινητό πλάτος σε ένα mockup σχεδιασμού (ισούται με 100VW)
80 - Επιθυμητό μέγεθος γραμματοσειράς τίτλου H1 στην επιφάνεια εργασίας
48 - Επιθυμητό μέγεθος γραμματοσειράς τίτλου H1 στο κινητό

Αυτές είναι οι τιμές x και y:

x = (80 - 48) / (1920 - 375)
x = 0,0207

Y = 80 - 1920 * 0.0207
y = 40.256

Για να χρησιμοποιήσετε αυτές τις τιμές, θα χρειαστούμε τη λειτουργία CIC CSS για να εκτελέσετε υπολογισμούς στην ιστοσελίδα (που υποστηρίζονται ευρέως από τα προγράμματα περιήγησης από το IE9 +). Πρέπει να μετρήσουμε το x * 100 φορές (επειδή 1VW μονάδα = 1 / 100th πλάτος προβολής).

Παίρνουμε την αρχική μας λειτουργία:
1920x + y = 80
375x + y = 48

Αντικαταστήστε το 1920 με 100VW:
100VW * x + y = επιθυμητή τιμή

Αντικαταστήστε το x και y με τις τιμές:
100VW * 0,0207 + 40.256 = επιθυμητή τιμή

Παίρνουμε το τελικό στυλ CSS:

 H1 {Μέγεθος γραμματοσειράς: Calc (2.07VW + 40.25px)}

Εκπληκτικά αρκετά, που τελικά λειτουργεί ακριβώς πώς θέλαμε!

Μόνο μια ιδιοκτησία για όλες τις οθόνες. Δεν χρειάζεται να αντικαταστήσετε ξανά τις τιμές. Μπορείτε να προσαρμόσετε και να υπολογίσετε κάθε είδους ιδιότητες: πλάτος, μέγεθος γραμματοσειράς, επένδυση, περιθώριο κλπ.

Ας προσπαθήσουμε να οικοδομήσουμε μια πραγματική διάταξη χρησιμοποιώντας αυτή την τεχνική:

Αλλά αυτή η προσέγγιση έχει ένα μειονέκτημα: είναι δύσκολο να καταλάβετε ποια τιμή στέκεται πίσω από αυτή τη λειτουργία Calc. Πώς μπορούμε να το απλοποιήσουμε;

Εάν κωδικοποιείτε HTML καθημερινά, πιθανόν να εξοικειωθείτε με τους προ-επεξεργαστές SASS / SCSS. Εδώ είναι μια μικρή βοήθεια για εσάς: Ας κάνουμε ένα "Mixin" και να κάνετε όλους αυτούς τους υπολογισμούς να συμβεί αυτόματα και εξακολουθούν να κρατούν τις αρχικές μας αξίες.

Είναι η ίδια λειτουργία όπως περιγράφεται παραπάνω, αλλά φτιαγμένη ως Mixin Sass:

 $ Wide-Wide: 1920
$ Οθόνη-Στενή: 375

@mixin υγρό ($ ιδιοκτησία, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ WIDE-Wide - $ Display-Narm)
  $ y: $ maxvalue - $ οθόνη-πλάτος * $ x
  # {$ Property}: Calc (# {100 * $ x} VW + # {$ y} px)

h1
  @include υγρό ('μέγεθος γραμματοσειράς', 48,80)

.δοχείο
  @include υγρό ('Πλάτος', 315.1580)
@include υγρό ('padding', 30,60)

Adaptive layouts: mixin — Ένα sass mixin μπορεί να κάνει όλη τη διαδικασία ευκολότερη

Αυτή η τεχνική Παρέχει μια πολύ εξελιγμένη λύση για την τελική οικοδόμηση πραγματικά ανταποκρινόμενων ιστοσελίδων. Υποστηρίζει τα περισσότερα από τα προγράμματα περιήγησης, εξασφαλίζει το έργο σας για να αποδειχθεί σωστά σε έναν επισκέπτη, απλοποιεί τη δομή στυλ σας και το πιο σημαντικό καθιστά τη διάταξη ιστού σας συνεπή και λογική. Ελπίζω ότι μπορεί να σας βοηθήσει να ξεκινήσετε κάποια εκπληκτικά έργα ιστού.

Σχετικά Άρθρα:

17 Πραγματικά χρήσιμα ανταποκρινόμενα σεμινάρια σχεδιασμού ιστοσελίδων
Τους κανόνες της ανταποκρινόμενης τυπογραφίας ιστού
Δημιουργήστε μια ανταποκρινόμενη διάταξη με το CSS Grid

Δημιουργία προσαρμοστικών διατάξεων χωρίς ερωτήματα πολυμέσων

Ο παραδοσιακός τρόπος

Μονάδες προβολής

Η λύση

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σχεδιάσετε ένα λιοντάρι

Πώς να repost στο Instagram

Πώς να δημιουργήσετε μια κωμική σελίδα

Πώς να σχεδιάσετε με τα σχήματα CSS: Εισαγωγή

Σχεδιάστε ένα Bad-Ass Geisha

Πώς να σχεδιάσετε ισομετρική τυπογραφία

Τι νέο υπάρχει στο γωνιακό 4;

Δημιουργήστε εκπληκτικές μορφές πλακιδίων σε μπλέντερ

Κατηγορίες