Πώς να φτιάξετε μια υπεύθυνη τοποθεσία Mobile στο AJAX για HTML5 και CSS3 Προγραμματισμός

Οι προγραμματιστές ιστού HTML5 και CSS3 μπορούν να χρησιμοποιήσουν το AJAX για να δημιουργήσουν έναν ανταποκρινόμενο ιστότοπο για κινητά. Ένας τρόπος για να κάνετε έναν ιστότοπο να λειτουργεί καλά σε πολλαπλές αναλύσεις είναι να παρέχετε διαφορετικούς κανόνες CSS με βάση τον τύπο μέσου που έχει ανιχνευθεί.

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

Καθορίστε έναν τύπο μέσου

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

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

@media print {body {font-size: 10pt;}}

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

Τρόπος προσθήκης ενός προκριματικού

Εκτός από τον προσδιορισμό του τύπου μέσου, ο κανόνας @media έχει ένα άλλο πολύ ισχυρό τέχνασμα. Μπορείτε να εφαρμόσετε μια ειδική ειδική προϋπόθεση στα μέσα μαζικής ενημέρωσης.

Όταν το πρόγραμμα περιήγησης είναι μεγαλύτερο από 500 pixels, μπορείτε να δείτε το μαύρο κείμενο σε λευκό φόντο. Αλλά κάνετε την οθόνη πιο στενή και βλέπετε κάτι ενδιαφέρον.

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

narrowBlack. html σώμα {χρώμα: μαύρο; φόντο-χρώμα: άσπρο ·} @ μέση (μέγ. πλάτος: 500px) {σώμα {χρώμα: άσπρο; χρώμα φόντου: μαύρο,}}

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

Δείτε πώς μπορείτε να δημιουργήσετε μια σελίδα που προσαρμόζεται στο πλάτος της οθόνης:

1. Κατασκευάστε τον ιστότοπό σας ως συνήθως.

   Αυτό είναι ένα μέρος όπου ολόκληρο το "ξεχωριστό περιεχόμενο από τη διάταξη" πράγματι αποδίδει. Η ίδια HTML θα έχει δύο διαφορετικά στυλ.

2. Εφαρμόστε ένα στυλ CSS με τον κανονικό τρόπο.

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

3. Δημιουργήστε έναν κανόνα @media.

   Ο κανόνας @media CSS θα πρέπει να πάει στο τέλος του κανονικού CSS.

4. Ορίστε έναν προσδιοριστή μέγιστου πλάτους: 500px.

   Αυτός ο προσδιοριστής υποδεικνύει ότι οι κανόνες μέσα σε αυτό το τμήμα θα χρησιμοποιηθούν μόνο αν το πλάτος της οθόνης είναι μικρότερο από 500 pixels.

5. Τοποθετήστε τους κανόνες ειδικών περιπτώσεων μέσα στο νέο σετ στυλ.

   Όλοι οι κανόνες CSS που ορίζετε μέσα στον κανόνα @media θα ενεργοποιηθούν εάν ο προσδιοριστής είναι αληθής. Χρησιμοποιήστε αυτούς τους κανόνες για να παρακάμψετε το υπάρχον CSS. Σημειώστε ότι δεν χρειάζεται να επαναπροσδιορίσετε τα πάντα. Απλώς δώστε κανόνες που έχουν νόημα στο συγκεκριμένο σας πλαίσιο.

6. Προσθέστε ένα παράθυρο προβολής.

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

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

Εάν το πλάτος είναι μικρότερο από 500 pixels, ο προσδιοριστής max-width: 500px αξιολογείται ως αληθής και όλος ο κώδικας CSS στο τμήμα @media είναι ενεργοποιημένος. Το πρόγραμμα περιήγησης στη συνέχεια αποθηκεύει και τα δύο σύνολα CSS και εφαρμόζει το σωστό CSS με βάση την κατάσταση του κανόνα.