Ένας άλλος παράγοντας που οδηγεί στην εστίαση στην σχεδίαση που ανταποκρίνεται πρώτα στα κινητά είναι ότι οι περισσότεροι άνθρωποι έχουν πρόσβαση στο Διαδίκτυο μέσω των κινητών τους συσκευών, που είναι 60%. Ενώ μόνο το 20% των ανθρώπων χρησιμοποιεί Διαδίκτυο σε επιτραπέζιους υπολογιστές.
Αυτό το άρθρο θα καλύψει τις οδηγίες για τη δημιουργία της σχεδίασης που ανταποκρίνεται πρώτα στο κινητό.
Πώς να ρυθμίσετε το Mobile-First Responsive Design;
Η σχεδίαση που ανταποκρίνεται, είτε ανταποκρίνεται πρώτα στο κινητό είτε για μεγαλύτερες οθόνες, μπορεί να δημιουργηθεί ακολουθώντας τις παρακάτω μεθόδους:
- Δημιουργήστε μια σχεδίαση που να ανταποκρίνεται πρώτα στο κινητό.
- Χρησιμοποιήστε/χρησιμοποιήστε το ερώτημα πολυμέσων για να αναπτύξετε/δημιουργήσετε ένα αποκριτικό σχέδιο για μεγαλύτερες οθόνες.
Μέθοδος 1: Δημιουργία σχεδίασης που ανταποκρίνεται πρώτα στο κινητό
Αρχικά, ξεκινήστε με τη δημιουργία της προσέγγισης σχεδίασης με προτεραιότητα το κινητό. Για το σκοπό αυτό, ακολουθήστε τις σταδιακές οδηγίες που παρέχονται παρακάτω.
Βήμα 1: Δημιουργήστε μια δομή HTML
Πρώτα, δημιουργήστε μια δομή HTML και προσθέστε ένα ' Bootstrap ' στο <κεφάλι> Ενότητα. Για να μάθετε την προσθήκη ενός φύλλου στυλ στην ενότητα HTML, κάντε κλικ σε αυτό Σύνδεσμος . Μετά τη δημιουργία μιας βασικής δομής ιστότοπου που περιλαμβάνει, <κανένα> , <κεφαλίδα> και <υποδήλατο> όπως προβλέπεται παρακάτω:
< σώμα ><κεφαλίδα>
<κανένα>
< ul >
< ότι >< ένα href = '#' > Σπίτι < / ένα >< / ότι >
< ότι >< ένα href = '#' > Σχετικά με εμάς < / ένα >< / ότι >
< ότι >< ένα href = '#' > Οι Υπηρεσίες μας < / ένα >< / ότι >
< ότι >< ένα href = '#' > Επικοινωνήστε μαζί μας < / ένα >< / ότι >
< / ul >
< / όχι>
< / κεφαλίδα>
<κύριος>
<τμήμα>
< h1 > Καλώς ήρθατε στο Linux Hint < / h1 >
< Π > Ιστότοπος με σεμινάρια. < / Π >
< / ενότητα>
< / κύρια>
<υποδήλατο>
< Π > Linux Hint Πνευματικά δικαιώματα < / Π >
< / υποσέλιδο>
< / σώμα >
Βήμα 2: Εφαρμογή CSS
Στο τμήμα του σώματος, ορίστε το ' γραμματοσειρά-οικογένεια ' προς την ' Σανς σέριφ '. Ορίστε επίσης το χρώμα πλήρωσης, περιθωρίου και φόντου. Μετά από αυτό, εφαρμόστε το CSS στην κεφαλίδα, το υποσέλιδο και την πλοήγηση:
σώμα {γραμματοσειρά-οικογένεια : Σανς σέριφ ;
περιθώριο : 0 ;
υλικό παραγεμίσματος : 0 ;
χρώμα του φόντου : #808080 ;
}
επί κεφαλής {
χρώμα του φόντου : μωβ ;
χρώμα : άσπρο ;
υλικό παραγεμίσματος : 8 εικονοστοιχεία ;
}
nav ul {
λίστα-στυλ-τύπου : κανένας ;
υλικό παραγεμίσματος : 0 ;
περιθώριο : 0 ;
}
το πλοίο τους {
περιθώριο : 4px 0 ;
}
nav ul li α {
χρώμα : άσπρο ;
κείμενο-διακόσμηση : κανένας ;
}
κύριος {
υλικό παραγεμίσματος : 18 εικονοστοιχεία ;
}
υποσέλιδο {
χρώμα του φόντου : ροζ ;
χρώμα : άσπρο ;
στοίχιση κειμένου : κέντρο ;
υλικό παραγεμίσματος : 8 εικονοστοιχεία ;
}
Όπως μπορεί να παρατηρηθεί, η παρακάτω έξοδος επιβεβαίωσε ότι η σχεδίαση ανταποκρίνεται πρώτα στο κινητό:
Μέθοδος 2: Χρησιμοποιήστε ερωτήματα πολυμέσων για να δημιουργήσετε αποκριτικό σχέδιο για μεγαλύτερες οθόνες
Το παραπάνω σχέδιο μπορεί επίσης να δημιουργηθεί για μεγαλύτερες οθόνες όπως tablet και επιτραπέζιους υπολογιστές. Για το σκοπό αυτό, οι χρήστες πρέπει να συμπεριλάβουν το ερώτημα πολυμέσων στο CSS. Το πλάτος για τα tablet είναι ' 786 εικονοστοιχεία ' και για επιτραπέζιους υπολογιστές είναι ' 1024 εικονοστοιχεία '.
Για να εφαρμόσετε τα ερωτήματα πολυμέσων, πρώτα συμπεριλάβετε το ' @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ετικέτα ' στο αρχείο CSS. Μετά από αυτό, καθορίστε την ιδιότητα 'min-width' ως ' 768 εικονοστοιχεία '. Αυτό σημαίνει ότι όποτε πληρούται το ελάχιστο μέγεθος οθόνης '768px' ή παραπάνω, τότε θα ισχύει το ακόλουθο CSS:
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ( ελάχ. πλάτος : 768 εικονοστοιχεία ) {σώμα {
μέγεθος γραμματοσειράς : 14 εικονοστοιχεία ;
}
επί κεφαλής {
υλικό παραγεμίσματος : 18 εικονοστοιχεία ;
}
nav ul {
απεικόνιση : καλώδιο ;
}
το πλοίο τους {
περιθώριο : 0 8 εικονοστοιχεία ;
}
κύριος {
απεικόνιση : καλώδιο ;
δικαιολογώ-περιεχόμενο : διάστημα-μεταξύ ;
στοίχιση-στοιχεία : κέντρο ;
}
υποσέλιδο {
υλικό παραγεμίσματος : 18 εικονοστοιχεία ;
}
}
Η παρακάτω έξοδος έδειξε ότι η σχεδίαση ανταποκρίνεται επίσης σε μεγαλύτερες οθόνες:
συμπέρασμα
Για να ρυθμίσετε μια σχεδίαση που αποκρίνεται πρώτα στο κινητό, πρώτα, δημιουργήστε μια δομή HTML και προσθέστε τη θύρα προβολής. Μετά από αυτό συνδέστε το αρχείο CSS στην ετικέτα κεφαλής. Στη συνέχεια, εφαρμόστε το CSS με βάση τον σχεδιασμό που ανταποκρίνεται πρώτα στο κινητό. Επιπλέον, οι χρήστες μπορούν να προσθέσουν το ερώτημα πολυμέσων CSS για προσαρμογή στην κινητή συσκευή. Αυτή η εγγραφή έχει δείξει μια λεπτομερή διαδικασία για τη δημιουργία ενός σχεδιασμού που ανταποκρίνεται πρώτα στο κινητό.