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

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

Πριν προχωρήσουμε στη διαδικασία κωδικοποίησης HTML, ας χειριστούμε πρώτα τη μετα-ετικέτα "viewport". Οι συσκευές Apple iPhone και iPod Touch έχουν προγραμματιστεί να κλιμακώνουν αυτόματα τους ιστότοπους στην έκδοση iOS του προγράμματος περιήγησης Safari.

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

Όταν ξεκινήσετε να εργάζεστε με HTML, πιθανότατα θα παρατηρήσετε ότι το έγγραφο αποτελείται από αρκετά απλά στοιχεία HTML5, με εξαίρεση τη μετα-ετικέτα της θύρας προβολής και το div μας με το κύριο φόντο.

Μόλις ολοκληρώσουμε την εργασία με το HTML, ας δημιουργήσουμε ένα αρχείο Cascading Style Sheets (CSS). Συνιστούμε να χρησιμοποιήσετε μια επαναφορά CSS για να αποτρέψετε ανεπιθύμητα περιθώρια, padding ή περιγράμματα. Απλώς χρησιμοποιήστε αυτό το απόσπασμα κώδικα στα αρχεία CSS σας.

Σώμα, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, σύνολο πεδίων, legend, label, input, textarea (
περιθώριο: 0; padding: 0; περίγραμμα: 0;
}
sh1, h2, h3, h4, h5, h6, p (
περιθώριο: 0 0 1em 0;
}
h1 (μέγεθος γραμματοσειράς: 200%;)
h2 (μέγεθος γραμματοσειράς: 170%;)
h3 (μέγεθος γραμματοσειράς: 160%;)
h4 (μέγεθος γραμματοσειράς: 140%;)
h5 (μέγεθος γραμματοσειράς: 120%;)
Τώρα, καθώς αναπτύσσουμε από την αρχή, μπορείτε να ανοίξετε την ετικέτα σώματος και να προσθέσετε στυλ εκεί. Ορίζουμε το χρώμα φόντου σε λευκό και το χρώμα του κειμένου σε σκούρο γκρι. Ο συνδυασμός μαύρου κειμένου σε λευκό φόντο δημιουργεί συχνά μια αίσθηση υπερβολικής αντίθεσης και σε πολλούς επισκέπτες προκαλεί έκθαμψη στα μάτια.

Html, σώμα (ύψος: 100%; )
Σημειώστε επίσης ότι το μέγεθος της γραμματοσειράς είναι σε μονάδες em και αυτό είναι ένα από τα πιο σημαντικά στοιχεία κατά την ανάπτυξη μιας σχεδίασης με απόκριση, καθώς το μέγεθος αυτής της μονάδας βασίζεται σε ένα ποσοστό. Εάν ορίσετε το μέγεθος της γραμματοσειράς σε διαστάσεις pixel, δεν θα ταιριάζει με το υπόλοιπο σχέδιο, εάν ο ιστότοπος έχει μειωθεί ώστε να εμφανίζεται σωστά σε μικρότερες οθόνες. Τα γράμματα είτε θα καταλαμβάνουν ολόκληρη την οθόνη είτε θα επικαλύπτουν το ένα το άλλο, και αυτό είναι εντελώς αντιαισθητικό.

Μπορούμε επίσης να προσθέσουμε στυλ στην τάξη μας .homeContent και στο αναγνωριστικό #mainBG. Ορίσαμε το ύψος της σελίδας, ορίσαμε το πλάτος στο 100% και κεντράραμε το περιεχόμενο στην κλάση .homeContent. Το ID #mainBG θα είναι υπεύθυνο για την εικόνα φόντου, η οποία στο παράδειγμά μας είναι μια στοκ εικόνα που λαμβάνεται από τον συγγραφέα. Ρυθμίσαμε επίσης το μέγεθος φόντου στο κάλυμμα, το οποίο θα τεντώσει την εικόνα για να γεμίσει ολόκληρη την οθόνη και θα επιτρέψει στην εικόνα φόντου να διατηρεί τις σωστές αναλογίες όταν εμφανίζεται σε οθόνες υψηλότερης ανάλυσης. Το μέγεθος της εικόνας φόντου "big.jpg" είναι 1920x1189.

Αρχική Περιεχόμενο (
ύψος: 100%;
πλάτος: 100%;
θέση: σχετική;
περιθώριο: 0 αυτόματο;
}

#mainBG (
φόντο: url(images/big.jpg) κύλιση χωρίς επανάληψη.
φόντο-θέση:κέντρο;
Μέγεθος φόντου: εξώφυλλο;
-moz-φόντο-μέγεθος: εξώφυλλο;
-o-φόντο-μέγεθος: εξώφυλλο;
}
Τώρα που τελειώσαμε με τα βασικά, ας εφαρμόσουμε ερωτήματα πολυμέσων. Τα δύο πρώτα ερωτήματα θα αφορούν υπολογιστές tablet. Χρησιμοποιώντας αυτά τα αιτήματα, θα μπορέσουμε να φορτώσουμε μια εικόνα φόντου μεσαίου μεγέθους, καθώς η φόρτωση μιας μεγάλης εικόνας μπορεί να πάρει χρόνο και εύρος ζώνης, και αν δεν χρειαζόμαστε μια εικόνα διπλάσιου μεγέθους από την οθόνη, τότε δεν χρειάζεται πρέπει να το φορτώσετε. Το μέγεθος της εικόνας φόντου "medium.jpg" είναι 1024x770 pixel. Πρέπει επίσης να το τοποθετήσουμε με τέτοιο τρόπο ώστε να εμφανίζεται σωστά σε όλους τους τύπους tablet.

Οθόνη @media μόνο και (μέγιστο πλάτος: 1024 px) και (προσανατολισμός: οριζόντιος) (
#mainBG ( φόντο: url(images/medium.jpg) 50% 0 κύλιση χωρίς επανάληψη !important;
φόντο-θέση:κέντρο;
Μέγεθος φόντου: εξώφυλλο;
-webkit-φόντο-μέγεθος: εξώφυλλο;
-moz-φόντο-μέγεθος: εξώφυλλο;
-o-φόντο-μέγεθος: εξώφυλλο;
}
}
Μόνο οθόνη @media και (ελάχ. πλάτος: 768 εικονοστοιχεία) και (μέγ. πλάτος: 991 εικονοστοιχεία) (
#mainBG ( φόντο: url(images/medium.jpg) 50% 80% χωρίς επανάληψη κύλισης !important;
φόντο-θέση:κέντρο;
Μέγεθος φόντου: εξώφυλλο;
-webkit-φόντο-μέγεθος: εξώφυλλο;
-moz-φόντο-μέγεθος: εξώφυλλο;
-o-φόντο-μέγεθος: εξώφυλλο;
}
}
Το τελευταίο ερώτημα θα είναι για κινητά τηλέφωνα. Μέσα από αυτό το αίτημα θα εμφανίσουμε την εικόνα φόντου μας που ονομάζεται “small.jpg”, οι διαστάσεις της οποίας είναι 767x475.

Μόνο οθόνη @media και (ελάχ. πλάτος: 0 εικονοστοιχεία) και (μέγ. πλάτος: 767 εικονοστοιχεία) (
#mainBG ( φόντο: url(images/small.jpg) 75% 80% χωρίς επανάληψη κύλισης !important;
φόντο-θέση:κέντρο;
Μέγεθος φόντου: εξώφυλλο;
-webkit-φόντο-μέγεθος: εξώφυλλο;
-moz-φόντο-μέγεθος: εξώφυλλο;
-o-φόντο-μέγεθος: εξώφυλλο;
}
}
Προεπισκόπηση της εργασίας που έγινε στο πρόγραμμα περιήγησης. Ανοίξτε το αριστούργημά σας πρώτα σε πλήρη οθόνη και, στη συνέχεια, μειώστε σταδιακά το παράθυρο προβολής. Θα δείτε ότι η εικόνα αρχίζει αμέσως να αλλάζει σε μέγεθος. Προσπαθήστε να προσδιορίσετε σε ποια θέση ενεργοποιούνται τα ερωτήματα πολυμέσων και σε ποια θέση αλλάζει το μέγεθος της εικόνας.

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

Παραδείγματα αποκριτικών εικόνων φόντου ακέραιου αριθμού

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

Εάν θέλετε να επιτύχετε ένα παρόμοιο αποτέλεσμα στο επόμενο web project σας, τότε αυτό το άρθρο είναι αυτό που χρειάζεστε.

Βασικές αρχές

Εδώ είναι το σχέδιο δράσης μας.

Χρησιμοποιήστε την ιδιότητα μεγέθους φόντου για να γεμίσετε πλήρως τη θύρα προβολής

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

Χρησιμοποιήστε ένα ερώτημα πολυμέσων για να χειριστείτε μικρές εικόνες φόντου για κινητές συσκευές

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

Η εικόνα που χρησιμοποίησα στο demo έχει ανάλυση 5500x3600px. Αυτή η ανάλυση είναι επαρκής για τις περισσότερες οθόνες υπολογιστών ευρείας οθόνης που διατίθενται αυτήν τη στιγμή στην αγορά. Αλλά για αυτό θα πρέπει να επεξεργαστείτε ένα αρχείο μεγέθους 1,7 MB.

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

HTML

Το μόνο που χρειάζεστε για τη σήμανση είναι αυτό:

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

Ωστόσο, αυτή η τεχνική θα λειτουργήσει επίσης για οποιοδήποτε στοιχείο μπλοκ (όπως ένα div ή μια φόρμα). Εάν το πλάτος και το ύψος του στοιχείου μπλοκ σας είναι ρευστά, τότε η εικόνα φόντου θα κλιμακώνεται πάντα ώστε να γεμίζει ολόκληρο το κοντέινερ.

CSS

Ορίστε τα ακόλουθα στυλ για το στοιχείο του σώματος:

body ( /* Διαδρομή προς την εικόνα */ φόντο-εικόνα: url(images/background-photo.jpg); /* Η εικόνα φόντου είναι πάντα κεντραρισμένη κατακόρυφα και οριζόντια */ θέση φόντου: κέντρο στο κέντρο; /* Η εικόνα φόντου δεν επαναλαμβάνεται * / background-repeat: no-repeat; /* Η εικόνα φόντου είναι σταθερή στη θύρα προβολής, επομένως δεν μετακινείται όταν το ύψος του περιεχομένου είναι μεγαλύτερο από το ύψος της εικόνας */ background-attachment: fixed; /* Αυτό επιτρέπει στην εικόνα φόντου να προσαρμόζεται στο μέγεθος του κοντέινερ */ background-size: cover; /* Ορίζει το χρώμα φόντου που θα εμφανίζεται κατά τη φόρτωση της εικόνας φόντου */ background-color: #464646; )

σώμα ( /* Διαδρομή προς την εικόνα */ φόντο - εικόνα : url (εικόνες / φόντο - φωτογραφία . jpg ) ; /* Η εικόνα φόντου είναι πάντα κεντραρισμένη κατακόρυφα και οριζόντια */ /* Η εικόνα φόντου δεν επαναλαμβάνεται */ φόντο - επανάληψη : όχι - επανάληψη ; /* Η εικόνα φόντου είναι σταθερή στη θύρα προβολής, ώστε να μην μετακινείται όταν το ύψος του περιεχομένου είναι μεγαλύτερο από το ύψος της εικόνας */ /* Αυτό επιτρέπει στην εικόνα φόντου να προσαρμόζεται στο μέγεθος του κοντέινερ */ φόντο-μέγεθος: εξώφυλλο; /* Ορίζει το χρώμα φόντου που θα εμφανίζεται κατά τη φόρτωση της εικόνας φόντου */ φόντο - χρώμα : #464646;

Το πιο σημαντικό ζεύγος ιδιοκτησίας/αξίας που πρέπει να προσέξετε είναι:

Μέγεθος φόντου: εξώφυλλο;

φόντο-μέγεθος: εξώφυλλο;

Εδώ αρχίζει η μαγεία. Αυτό το ζεύγος ιδιοτήτων/τιμής λέει στο πρόγραμμα περιήγησης να κλιμακώσει την εικόνα φόντου αναλογικά, π.χ. ώστε το πλάτος και το ύψος του να είναι ίσα ή μεγαλύτερα από το πλάτος/ύψος του στοιχείου (στην περίπτωσή μας, το στοιχείο του σώματος).

Ωστόσο, υπάρχει ένα πρόβλημα με αυτό το ζεύγος ιδιοτήτων/τιμών: εάν η εικόνα φόντου είναι μικρότερη από το στοιχείο του σώματος - κάτι που θα συμβεί σε οθόνες υψηλής ανάλυσης ή/και όταν έχετε τεράστιο όγκο περιεχομένου στη σελίδα - το πρόγραμμα περιήγησης θα αναπόφευκτα αυξήστε την κλίμακα της εικόνας. Και όπως γνωρίζουμε, όταν αυξάνουμε το μέγεθος μιας εικόνας bitmap, η ποιότητα της εικόνας μειώνεται (με άλλα λόγια, εμφανίζεται pixilation).

Η αύξηση του μεγέθους της εικόνας από το αρχικό της μέγεθος επηρεάζει την ποιότητα της εικόνας. Λάβετε αυτό υπόψη όταν επιλέγετε τη σωστή εικόνα. Η επίδειξη χρησιμοποιεί μια τεράστια φωτογραφία 5500x3600 px για οθόνες ευρείας οθόνης, επομένως θα απαιτούσε μια πολύ μεγάλη οθόνη για να υποβαθμιστεί η ποιότητα. Ας προχωρήσουμε. Για να διασφαλίσουμε ότι η εικόνα φόντου είναι πάντα κεντραρισμένη στο παράθυρο προβολής, θα γράψουμε:

φόντο-θέση: κέντρο κέντρο;

φόντο - θέση: κέντρο κέντρο;

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

Σε αυτήν την περίπτωση, πρέπει να διασφαλίσουμε ότι η εικόνα φόντου παραμένει στην αρχική της θέση ακόμα και όταν ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα. Σε αυτήν την περίπτωση, η εικόνα είτε απλά θα τελειώσει κατά την κύλιση είτε θα μετακινηθεί καθώς προχωρά η κύλιση (κάτι που μπορεί να αποσπάσει πολύ την προσοχή του χρήστη). Για να διορθώσετε το φόντο, ορίσαμε την ιδιότητα συνημμένου φόντου σε fixed.

φόντο-συνημμένο: σταθερό;

φόντο - συνημμένο: σταθερό;

Στην επίδειξη, πρόσθεσα μια επιλογή "φόρτωση περιεχομένου", ώστε να μπορείτε να δείτε τι συμβαίνει όταν εμφανίζεται μια γραμμή κύλισης στο πρόγραμμα περιήγησης όταν η ιδιότητα του συνημμένου φόντου έχει οριστεί ως διορθωμένη. Μπορείτε επίσης να κάνετε λήψη της επίδειξης και να παίξετε με τις τιμές ιδιοτήτων τοποθέτησης (όπως το συνημμένο φόντο και τη θέση φόντου) για να δείτε πώς επηρεάζει την κύλιση σελίδας και την εικόνα φόντου. Οι υπόλοιπες αξίες των ακινήτων είναι αρκετά αυτονόητες.

Συντομογραφία CSS

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

σώμα ( φόντο: url(background-photo.jpg) κεντρικό κεντρικό κάλυμμα χωρίς επανάληψη διορθώθηκε; )

σώμα ( φόντο : url (φόντο - φωτογραφία . jpg ) κεντρικό κάλυμμα χωρίς επανάληψη διορθώθηκε ;

Το μόνο που χρειάζεται να κάνετε είναι να αλλάξετε την τιμή του url ώστε να δείχνει την εικόνα φόντου σας.

Προαιρετικά: Ερώτημα πολυμέσων για μικρές οθόνες

Για μικρότερες οθόνες, χρησιμοποίησα το Photoshop για να μειώσω αναλογικά την αρχική εικόνα φόντου σε 768x505 px και χρησιμοποίησα επίσης το Smush.it για να μειώσω λίγο περισσότερο το μέγεθος. Χάρη σε αυτό, το μέγεθος του αρχείου μειώθηκε από 1741KB σε 114KB. Εκείνοι. το μέγεθος της εικόνας μειώθηκε κατά 93%.

Παρακαλώ μην με παρεξηγήσετε, τα 114 KB είναι ακόμα πολλά για ένα καθαρά αισθητικό στοιχείο σχεδίασης. Λαμβάνοντας υπόψη τον πρόσθετο φορτίο των 114 KB, θα χρησιμοποιούσα ένα τέτοιο αρχείο μόνο εάν έβλεπα την ευκαιρία να βελτιώσω σημαντικά την εμπειρία χρήστη (UX) του ιστότοπου, επειδή... Αυτή τη στιγμή, σημαντικό μερίδιο της κίνησης στο Διαδίκτυο προέρχεται από τη λειτουργία φορητών συσκευών φόντο - εικόνα: url (εικόνες / φόντο - φωτογραφία - κινητά - συσκευές. jpg);

Το ερώτημα πολυμέσων έχει όριο πλάτους μέγιστου πλάτους: 767 εικονοστοιχεία, που σημαίνει ότι εάν η θύρα προβολής του προγράμματος περιήγησης είναι μεγαλύτερη από 767 εικονοστοιχεία, θα φορτωθεί μια μεγάλη εικόνα φόντου.

Το μειονέκτημα στη χρήση αυτού του ερωτήματος πολυμέσων είναι ότι αν αλλάξετε το πλάτος του παραθύρου του προγράμματος περιήγησής σας από, για παράδειγμα, 1200 εικονοστοιχεία σε 640 εικονοστοιχεία (ή αντίστροφα), θα δείτε αμέσως τη στιγμή που φορτώνεται μια μικρή ή μεγάλη εικόνα φόντου.

Επιπλέον, επειδή ορισμένες συσκευές με μικρή οθόνη μπορούν να εμφανίσουν περισσότερα pixel - για παράδειγμα, το iPhone 5 με οθόνη αμφιβληστροειδούς μπορεί να εμφανίζει ανάλυση 1136x640 px - η μικρή εικόνα φόντου θα γίνει pixel.

Συνοψίζοντας

Μπορείτε να δείτε μια πιο πρόσφατη έκδοση του πηγαίου κώδικα σε αυτό το σεμινάριο στο GitHub. Μπορώ μόνο να σας προειδοποιήσω για ένα πράγμα: χρησιμοποιήστε αυτήν την τεχνική με προσοχή γιατί τα μεγάλα αρχεία μπορούν να βλάψουν σοβαρά το UX, ειδικά εάν ο τελικός χρήστης χρησιμοποιεί αργή και αναξιόπιστη σύνδεση στο Διαδίκτυο. Αυτός είναι ένας άλλος λόγος για τον οποίο θα πρέπει να επιλέξετε ένα κατάλληλο χρώμα φόντου, ώστε ο χρήστης να μπορεί να διαβάσει το περιεχόμενο ενώ φορτώνεται η εικόνα φόντου.

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

Δείτε τι άλλο υπάρχει σχετικά με τις αποκριτικές εικόνες ιστότοπου:

Εάν θέλετε να κάνετε το φόντο σας πραγματικά μοναδικό, τότε προτείνω το ακόλουθο άρθρο:

Δείτε πώς φαίνεται αυτό σε ένα πραγματικό παράδειγμα:

Κατεβάστε

Παρακάτω μπορείτε να δείτε πώς προσαρμόζεται η εικόνα φόντου σε διαφορετικές συσκευές:

Πώς να δημιουργήσετε μια αποκριτική εικόνα φόντου για έναν ιστότοπο;

Μέρος HTML

Για αυτό το παράδειγμα θα ορίσουμε μια εικόνα φόντου για σώμα, αλλά μπορείτε να το κάνετε με παρόμοιο τρόπο για οποιοδήποτε μπλοκ στη σελίδα. Επομένως, δεν υπάρχει τίποτα υπερφυσικό στη δομή HTML:

Μέρος CSS

Το μόνο που μένει είναι να ορίσουμε τις απαραίτητες ιδιότητες στο αρχείο στυλ για να φτιάξουμε αυτό που θέλαμε - μια προσαρμοστική εικόνα φόντου για τον ιστότοπο:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

σώμα( /* Διαδρομή προς την εικόνα σε σχέση με αυτό το αρχείο */φόντο-εικόνα: url ( ../images/background-photo.jpg) ; /* Κεντράρετε πάντα την εικόνα κάθετα και οριζόντια */φόντο-θέση : κέντρο κέντρο ; /* Απενεργοποίηση επανάληψης εικόνας */ background-repeat : no-repeat ; /* Διορθώστε την εικόνα - παραμένει στη θέση της κατά την κύλιση του παραθύρου */φόντο-συνημμένο: σταθερό; /* Η εικόνα θα κλιμακωθεί ανάλογα με το μέγεθος του κοντέινερ */φόντο-μέγεθος: εξώφυλλο; /* Χρώμα φόντου εικόνας που θα εμφανίζεται μέχρι να φορτώσει η εικόνα */χρώμα φόντου: #464646; /* Ισοδύναμη συντομογραφία * φόντο: url(background-photo.jpg) κεντρικό κεντρικό εξώφυλλο χωρίς επανάληψη διορθώθηκε. */ }

Όλες οι γραμμές σχολιάζονται, επομένως δεν νομίζω ότι θα υπάρχουν προβλήματα με αυτόν τον κωδικό.

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

Θα χρησιμοποιήσουμε Ερωτήματα πολυμέσων, τα οποία σας επιτρέπουν να ορίσετε μεμονωμένες ιδιότητες για ένα αυθαίρετο πλάτος οθόνης:

Τι καναμε? Εάν το πλάτος του παραθύρου του προγράμματος περιήγησης στη συσκευή είναι μικρότερο από 767 pixel, τότε θα χρησιμοποιήσουμε διαφορετική εικόνα. Όλα είναι πολύ απλά.

Μία από τις κύριες εργασίες στην προσαρμοστική διάταξη είναι η κλιμάκωση των εικόνων (συμπεριλαμβανομένων των εικόνων φόντου) έτσι ώστε να εμφανίζονται σωστά σε συσκευές με διαφορετικές αναλύσεις οθόνης.

Με φωτογραφίες στην ετικέτα imgΕίναι απλό: όταν ορίζετε το πλάτος ως ποσοστό, το ύψος θα κλιμακώνεται αυτόματα. Αυτή η μέθοδος δεν μπορεί να εφαρμοστεί σε εικόνες φόντου.

Αυτό το κόλπο είναι να ορίσετε την τιμή ποσοστού συμπλήρωσης ( υλικό παραγεμίσματος) στοιχείο. Η μέθοδος δημοσιεύτηκε για πρώτη φορά σε ένα παλιό άρθρο ιστολογίου A List Apart, αλλά εξακολουθεί να λειτουργεί καλά.

Ας υποθέσουμε ότι έχετε μια εικόνα φόντου 800 επί 450 pixel και θέλετε να την κάνετε φόντο με σταθερή αναλογία διαστάσεων 16:9. Ο παρακάτω κώδικας χρησιμοποιείται για εσοχή px, αλλά όλα θα λειτουργήσουν με em. Υπάρχει επίσης ένα στοιχείο εικόνας HTML5· για να λειτουργεί σωστά σε παλαιότερα προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε το HTML5 shiv .

Div.column ( μέγ. πλάτος: 800 px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ )

Προσθήκη φόντου

Το στοιχείο που προκύπτει κλιμακώνεται όπως αναμένεται, αλλά αν προσθέσετε μια εικόνα φόντου, το αποτέλεσμα δεν θα είναι πολύ καλό. Χρησιμοποιώντας το χαρακτηριστικό Μέγεθος φόντου: εξώφυλλο. Δυστυχώς, αυτή η μέθοδος δεν λειτουργεί στον Internet Explorer 8. Για να λύσουμε αυτό το πρόβλημα, τοποθετούμε το φόντο χρησιμοποιώντας φόντο-θέση. Η εικόνα φόντου πρέπει να είναι τουλάχιστον τόσο πλάτος όσο μέγιστο πλάτοςστοιχείο. Διαφορετικά, η εικόνα θα περικοπεί.

Div.column ( /* Η εικόνα φόντου πρέπει να έχει πλάτος 800 px */ max-width: 800 px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); μέγεθος φόντου: εξώφυλλο; -moz-background-size: εξώφυλλο; /* Firefox 3.6 */ θέση φόντου: κέντρο; /* Internet Explorer 7/ 8 */ )

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

Για παράδειγμα, μια εικόνα με πλάτος 800 επί 200 εικονοστοιχεία (4:1) σε μια μικρή οθόνη, με πλάτος 300 εικονοστοιχεία, θα πρέπει να μειωθεί στα 150 εικονοστοιχεία (2:1). Ας μετρήσουμε τις ιδιότητες ύψοςΚαι padding-top:

Το σχήμα δείχνει την αναλογία διαστάσεων της εικόνας φόντου σε διαφορετικά πλάτη. Η κλίση του γραφήματος αντιστοιχεί στο χαρακτηριστικό padding-top, ύψος έναρξης - στο χαρακτηριστικό ύψος. Ο κωδικός που προκύπτει είναι:

Div.column ( /* Η εικόνα φόντου πρέπει να έχει πλάτος 800 px */ max-width: 800 px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120 px; /* start height */ background- εικόνα: url(http://voormedia.com/examples/amsterdam.jpg); μέγεθος φόντου: εξώφυλλο; -moz-background-size: cover; /* Firefox 3.6 */ θέση φόντου: κέντρο; /* Internet Explorer 7/8 */ )

Χρήση SCSS για υπολογισμό

Γνωρίσματα padding-topκαι ύψοςμπορεί να υπολογιστεί αυτόματα χρησιμοποιώντας προεπεξεργαστές όπως το SCSS. Ένα παράδειγμα αυτού:

/* Υπολογισμός αναλογίας ρευστού με βάση δύο διαστάσεις (πλάτος/ύψος) */ @mixin αναλογία υγρού ($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height- μεγάλο - $ύψος-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; ύψος: $ύψος ; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Αυτό το στοιχείο θα έχει αναλογία ρευστού από 4:1 στα 800 εικονοστοιχεία έως 2:1 στα 300 εικονοστοιχεία. */ @include fluid-ratio (800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); )

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

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

Αρχικά, θα χρειαστούμε δύο εικόνες φόντου, η πρώτη εικόνα πρέπει να είναι τουλάχιστον ευρείας οθόνης 1920*1080, με αυτό επιτυγχάνουμε κάλυψη ολόκληρης της περιοχής προβολής στις περισσότερες οθόνες ευρείας οθόνης που παράγονται αυτήν τη στιγμή.

Η δεύτερη εικόνα θα είναι μια μικρότερη έκδοση της πρώτης εικόνας φόντου, αλλά μόνο για κινητές συσκευές. Ας υποθέσουμε ότι αυτές οι εικόνες θα έχουν αναλύσεις 1920*1080 και 768*480.
Η δεύτερη εικόνα είναι η μείωση του χρόνου φόρτωσης της σελίδας σε αναλύσεις μικρής οθόνης και για αυτό θα χρησιμοποιήσουμε ένα ερώτημα μέσων για να λάβουμε μια μικρότερη έκδοση της εικόνας φόντου, αν και όλα λειτουργούν καλά χωρίς αυτήν.
Δεν θα σας μάθω πώς να επεξεργάζεστε εικόνες φόντου και να μειώνετε το βάρος τους· είμαι σίγουρος ότι όλοι έχουν σελιδοδείκτες με τέτοιες υπηρεσίες ή ξέρουν πώς να δουλεύουν με το Photoshop.

Λοιπόν, ο ίδιος ο κώδικας, ο πηγαίος κώδικας κατέβηκε από έναν ξένο ιστότοπο, αλλά δεν είναι δύσκολο να το καταλάβετε, παρόλο που τα σχόλια είναι στα αγγλικά, δεν τα έσβησα για να το κάνω πιο σαφές:
CSS:

200?"200px":""+(this.scrollHeight+5)+"px");">
σώμα (
/* Θέση της εικόνας */
background-image: url(images/background-photo.jpg);

/* Η εικόνα είναι κεντραρισμένη κάθετα και οριζόντια ανά πάσα στιγμή */
φόντο-θέση: κέντρο κέντρο;

/* Η εικόνα δεν επαναλαμβάνεται */
background-repeat: no-repeat;

/* Καθιστά την εικόνα σταθερή στη θύρα προβολής έτσι ώστε να μην μετακινείται όταν
το ύψος του περιεχομένου είναι μεγαλύτερο από το ύψος της εικόνας */
φόντο-συνημμένο: σταθερό;

/* Αυτό είναι που κάνει την εικόνα φόντου να αλλάξει κλίμακα με βάση το μέγεθος του κοντέινερ */
Μέγεθος φόντου: εξώφυλλο;

/* Επιλέξτε ένα συμπαγές χρώμα φόντου που θα εμφανίζεται κατά τη φόρτωση της εικόνας φόντου */
background-color:#464646;

/* ΣΥΝΟΠΤΙΚΗ ΣΗΜΕΙΩΣΗ CSS
* φόντο: url(background-photo.jpg) κεντρικό κεντρικό κάλυμμα χωρίς επανάληψη διορθώθηκε.
*/
}

/* Για κινητές συσκευές */
οθόνη @media μόνο και (μέγ. πλάτος: 767 εικονοστοιχεία) (
σώμα (
/* Το μέγεθος αρχείου αυτής της εικόνας φόντου είναι 93% μικρότερο
* για να βελτιωθεί η ταχύτητα φόρτωσης σελίδας στις συνδέσεις διαδικτύου για κινητά */
background-image: url(images/background-photo-mobile-devices.jpg);
}
}