Αυτή η ανάρτηση θα αναφέρει τις οδηγίες που είναι απαραίτητες για την υλοποίηση ερωτημάτων μέσων.
Πώς να εφαρμόσετε ερωτήματα πολυμέσων για φορητές συσκευές;
Το ερώτημα πολυμέσων μπορεί να εφαρμοστεί σε κινητές συσκευές αναφέροντας απλώς το ' @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ετικέτα ” και προσδιορίζοντας το μέγεθος της οθόνης στα μικρά άγκιστρα. Το CSS για αυτό το ερώτημα μέσων μπορεί στη συνέχεια να προστεθεί μέσα στα σγουρά άγκιστρα. Κάθε φορά που το μέγεθος της οθόνης ανταποκρίνεται στο μέγεθος που έχει καθορίσει ο χρήστης, θα εφαρμόσει το δηλωμένο ερώτημα πολυμέσων.
Ας δούμε ένα πρακτικό παράδειγμα για να μάθουμε την υλοποίηση ερωτημάτων πολυμέσων για κινητές συσκευές.
Παράδειγμα: Δημιουργήστε μια διάταξη που αλλάζει από διάταξη δύο στηλών σε διάταξη μιας στήλης εφαρμόζοντας ερωτήματα πολυμέσων
Στο παρακάτω παράδειγμα, η διάταξη της ιστοσελίδας θα αλλάξει από διάταξη στήλης σε διάταξη μονής στήλης:
Βήμα 1: Δημιουργήστε μια δομή HTML
- Αρχικά, δημιουργήστε ένα αρχείο HTML και συνδέστε το εξωτερικό αρχείο φύλλου στυλ CSS σε αυτό <κεφάλι> Ενότητα.
- Στη συνέχεια, δημιουργήστε ένα <κεφαλίδα> ενότητα και προσθέστε την επικεφαλίδα του ιστότοπου χρησιμοποιώντας το ετικέτα.
- Δημιουργώ ένα με το όνομα κλάσης 'container-class' και δύο ακόμημέσα έχει το όνομα κλάσης ' στήλη '. < σώμα >
<κεφαλίδα>
< h1 > Υπόδειξη Linux < / h1 >
< / κεφαλίδα>
< div τάξη = 'κατηγορία κοντέινερ' >
< div τάξη = 'στήλη' >
< h2 > Ενότητα Πρώτο < / h2 >
< Π > Το Linux Hint είναι μια από τις καλύτερες πλατφόρμες ηλεκτρονικής μάθησης. < / Π >
< / div >
< div τάξη = 'στήλη' >
< h2 > Ενότητα Δεύτερη < / h2 >
< Π > Το Linux Hint είναι μια από τις καλύτερες πλατφόρμες ηλεκτρονικής μάθησης. < / Π >
< / div >
< / div >
< / σώμα >Βήμα 2: Εφαρμογή CSS
Στο τμήμα του σώματος:- Πρώτα, καθορίστε το τμήμα του σώματος γράφοντας το ' σώμα ” κάντε ετικέτα και αναφέροντας τα σγουρά τιράντες.
- Μέσα στις αγκύλες, καθορίστε την οικογένεια γραμματοσειρών, το χρώμα φόντου, το περιθώριο και το padding.
Στο <κεφαλίδα> Ενότητα:
- Καθορίστε το χρώμα κειμένου, τη στοίχιση κειμένου, το χρώμα του φόντου και την επένδυση.
Στο “κατηγορία κοντέινερ” div:
- Ρυθμίστε το ' απεικόνιση 'αξία ακινήτου σε' καλώδιο ” για να δημιουργήσετε το Flexbox.
- Χρησιμοποιήστε το ' δικαιολογώ-περιεχόμενο ” για να προσθέσετε χώρο μεταξύ του περιεχομένου και να προσθέσετε padding.
Στην κατηγορία στήλης:
- Πρώτα, καθορίστε την δηλωμένη τιμή στο ' καλώδιο ιδιότητα για να προσθέσετε ένα κενό μεταξύ των δύο ενοτήτων διάταξης.
- Μετά από αυτό, προσθέστε το χρώμα φόντου, το περίγραμμα, το padding και το μέγεθος του κουτιού.
Βήμα 3: Εφαρμογή ερωτήματος πολυμέσων
- Για να εφαρμόσετε ερώτημα πολυμέσων για κινητές συσκευές, πρώτα προσθέστε το ' @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ετικέτα '.
- Στη συνέχεια, καθορίστε την τιμή ' 768 εικονοστοιχεία ' που είναι τυπικό για κινητές συσκευές στο ' μέγιστο πλάτος ” ιδιοκτησία εντός των μικρών τιράντες.
- Μετά από αυτό, καθορίστε το ' στήλη 'τιμή στο ' flex-direction « ακίνητο που θα ισχύει για το « κατηγορίας εμπορευματοκιβωτίων». Αυτό θα αλλάξει τις δύο στήλες σε μία στήλη κάθε φορά που εντοπίζεται το καθορισμένο μέγεθος οθόνης.
- Τέλος, εφαρμόστε CSS στο ' στήλη 'κατηγορία και προσδιορίστε' περιθώριο ' και ' καλώδιο ' αξίες:
γραμματοσειρά-οικογένεια: sans-serif;
Ιστορικό- χρώμα : ασήμι;
περιθώριο: 0 ;
υλικό παραγεμίσματος: 0 ;
}
επί κεφαλής {
Ιστορικό- χρώμα : #2f4f4f;
padding: 20px;
κείμενο- ευθυγραμμίζω : κέντρο;
χρώμα : άσπρο;
}
.δοχείο- τάξη {
οθόνη: flex;
δικαιολογώ- περιεχόμενο : διάστημα μεταξύ;
padding: 20px;
}
.στήλη {
καλώδιο: 0 1 υπολογ ( πενήντα % - 10 εικονοστοιχεία ) ;
σύνορο : 1px σταθερό πράσινο;
Ιστορικό- χρώμα : άσπρο;
box-sizing: border-box;
padding: 20px;
}
@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ( Μέγιστη- πλάτος : 768 px ) {
.δοχείο- τάξη {
flex-direction: στήλη;
}
.στήλη {
καλώδιο: 0 1 100 %;
margin-bottom: 20px;
}
}Παραγωγή
Ακολουθεί η έξοδος της ιστοσελίδας μετά την εφαρμογή του ερωτήματος πολυμέσων. Αυτή η έξοδος είναι μια διάταξη με απόκριση δύο στηλών:
Κάθε φορά που η οθόνη πληροί τις καθορισμένες διαστάσεις χρησιμοποιώντας ένα ερώτημα μέσων για κινητά, μετατρέπεται σε διάταξη μιας στήλης:
συμπέρασμα
Για να εφαρμόσετε ερωτήματα πολυμέσων για κινητές συσκευές, πρώτα συμπεριλάβετε το ' θέαση ' στο ' κεφάλι ' Ενότητα. Στη συνέχεια, γράψτε CSS ειδικά σχεδιασμένο για κινητά. Μετά από αυτό, προσθέστε το ερώτημα πολυμέσων χρησιμοποιώντας την ετικέτα '@media' και προσδιορίζοντας το μέγεθος οθόνης του κινητού. Για παράδειγμα, καθορίστε 768 px για tablet και 480 px για κινητά τηλέφωνα. Αυτό το άρθρο εξηγεί τη διαδικασία για την υλοποίηση ερωτημάτων πολυμέσων για κινητές συσκευές.