CSS Media Queries: βήμα προς βήμα περιγραφή, τα χαρακτηριστικά και σχόλια

Μια φορά κι έναν καιρό, όσοι επισκέπτονται ιστοσελίδες για smartphones και παρόμοιες κινητές συσκευές που προκαλούν άλλοι μόνο γέλιο. Πολλοί απλά δεν μπορούσε να καταλάβει γιατί αυτό είναι απαραίτητο, διότι υπάρχει μια τέτοια άνετη επιτραπέζιους υπολογιστές! Ή, στη χειρότερη περίπτωση, φορητούς υπολογιστές. Επιπλέον, το κινητό Internet τότε ήταν ακριβό.

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

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

Η έλευση του CSS Media Queries

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

Στη συνέχεια ήρθε CSS3 Media Ερωτήματα. Μαζί τους ήρθε η απλή δυνατότητα της εφαρμογής της δυναμικής σχεδίασης.

Τι είναι η δυναμική σχεδίαση;

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

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

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

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

• top - μονάδα με κάθετη μενού πλοήγησης?
• κάτω από αυτό - το μπλοκ με τις επαφές, οι οποίες είναι πλέον τοποθετείται κάθετα?
• sidebar περιεχόμενο δεν εμφανίζεται στο πλευρό του <κύριο> περιεχόμενο ετικέτα, και πάνω από αυτό.

Αυτό είναι ένα απλό παράδειγμα του τι μπορεί να γίνει με Responsive Web Design Media Ερωτήματα. Στην πραγματικότητα, πολύ περισσότερες δυνατότητες.

Έτσι τι είναι τα ερωτήματα των μέσων ενημέρωσης;

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Σύμφωνα με CSS Media Queries CSS3 κατανόηση του όρου μονάδα, με το οποίο μπορείτε να κάνετε το περιεχόμενο της σελίδας για να προσαρμοστούν στις συγκεκριμένες συνθήκες. Για παράδειγμα, αυτή η διαδικασία αρχίζει να ανταποκριθεί στο μέγεθος της οθόνης, ή διάταξη προσανατολισμού (πορτραίτο / τοπίο).

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

CSS Media Queries Συμβατότητα Browser

Safari до Chrome. Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν αυτή την τεχνολογία, από το Safari στο Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Φυσικά, οι χρήστες των παλαιότερων εκδόσεων του Internet Explorer έχουν ένα πρόβλημα ... αλλά ας το παραδεχτούμε με ειλικρίνεια - εκείνοι που εξακολουθούν να χρησιμοποιούν παλαιότερες του IE, οτιδήποτε μπορεί να προκαλέσει προβλήματα.

Σύνταξη προσαρμοστική διάταξη Media Ερωτήματα

html. Ίσως να έχουν εκτεθεί σε ερωτήματα των μέσων ενημέρωσης που περιλαμβάνουν στυλ αρχείο σε html. Να θυμάστε ότι η γραμμή; Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. < 'Στυλ' link rel = Τύπος = 'text / css' href = http: // ιστοσελίδα /article/320575/%E2%80%99style.css%E2%80%99%3E Μερικές φορές στο τέλος προσθέτει μια άλλη παράμετρο, που φαινόταν σαν: «οθόνη» των μέσων ενημέρωσης =.

Αυτό είναι ένα ερώτημα μέσα μαζικής ενημέρωσης! Ο ίδιος δηλώνει ότι το καθορισμένο αρχείο στυλ θα λειτουργήσει σε συσκευές εξοπλισμένες με τηλεόραση. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Αντ 'αυτού, μπορείτε να καθορίσετε εκτύπωση οθόνη - σε αυτήν την περίπτωση, οι μορφές του αρχείου που εφαρμόζεται, εάν η σελίδα εκτυπώνεται.

Μπορείτε να χρησιμοποιήσετε τα ακόλουθα χαρακτηριστικά:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; όλα - καθολική έκδοση, που χρησιμοποιείται από τη σιωπή, εφαρμόζεται σε όλες τις περιπτώσεις?
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - οθόνες (υπολογιστές, φορητούς υπολογιστές, δισκία, smartphones, και όλα αυτά είναι εξοπλισμένο με μια οθόνη)?
• принтеры; εκτύπωσης - Εκτυπωτές?
• – проекторы; προβολής - προβολέας?
• – речевые браузеры; browsers ομιλία - ομιλία?
• – для устройств для слабовидящих; μπράιγ - συσκευές για άτομα με προβλήματα όρασης?
• – для экранов телевизоров. tv - για οθόνες τηλεόρασης.

Αυτό δεν είναι όλα. , но они используются редко. Υπάρχουν αποδίδει αρκετές επιπλέον CSS Media Queries, αλλά χρησιμοποιούνται σπάνια. all. Επιπλέον, δεν χρειάζεται να καθορίσετε μια παράμετρο - Προεπιλογή για όλους.

Η δομή των ερωτήματα μέσων

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

(тут будут стили } οθόνη @media και (max-width: 1024px) {( υπάρχουν μορφές}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Μετά οδηγία @media, η οποία καθιστά σαφές ότι χρησιμοποιείται το ερώτημα των μέσων ενημέρωσης, υπάρχει μία ένδειξη του τύπου της συσκευής (οθόνης - η οθόνη) και πρόσθετες παραμέτρους. Max Width. Σε αυτό το παράδειγμα, χρησιμοποιήστε το ακίνητο CSS Media Queries Μέγιστο πλάτος. px. Αυτό σημαίνει ότι οι μορφές που αναφέρονται στις τιράντες θα συμμετάσχει, εάν ο χρήστης του μεγέθους της οθόνης της συσκευής από το 1024 px. и and не обязательны. Οθόνη και και δεν είναι δεσμευτική. Μπορείτε να γράψετε το εξής:

@media (max-width: 1024px) {}

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

Καθορισμός πολλαπλές παραμέτρους

Ας υποθέσουμε ότι θέλετε να περιορίσετε το εύρος των πολλών συσκευών που θα χρησιμοποιηθούν για να επιλέξετε το στυλ. px, но не больше 500 px. Ας υποθέσουμε ότι θέλετε να εμφανίσετε τις ιδιότητες του μόνο εκείνοι που επισκέπτονται το site σας από ένα smartphone, το μέγεθος της οθόνης δεν είναι μικρότερη από 320 px, αλλά όχι περισσότερο από 500 px. Σε μια τέτοια περίπτωση, το αίτημα λαμβάνει τη μορφή:

@media (min-πλάτος: 320) και (max-width: 500px) {}

and. Εάν είστε εξοικειωμένοι με τον προγραμματισμό, θα NJ ξέρετε τι χειριστή εφαρμόζεται και. Για όσους δεν γνωρίζουν: ελέγχει εάν και οι δύο συνθήκες είναι αληθείς. ιδιότητες Ε ενεργοποίηση της οθόνης ερώτημα δεν πρέπει να είναι μικρότερη από 320 και όχι μεγαλύτερη από 500 pixels.

and не ограничивается одним. Και τον αριθμό των φορέων που δεν περιορίζεται σε ένα. Μπορείτε να τα βάλετε όσο θέλετε. Για παράδειγμα, προσπαθήστε να δημιουργήσετε ένα ορισμένο οθόνες μεγέθους για smartphones και αρκετά διαφορετική - για τηλεοράσεις.

Ένα σημαντικό σημείο - ο προσανατολισμός της συσκευής του χρήστη. Κάποιος περιήγηση ιστοσελίδες στο smartphone σας σε κατακόρυφο προσανατολισμό, κάποιος - με το τοπίο. orientation:portrait, для вторых, соответственно, orientation:landscape. Για την πρώτη, θα χρειαστείτε ένα πρόσθετο προσανατολισμό κατάσταση: πορτρέτο, για το δεύτερο, αντίστοιχα, τον προσανατολισμό: το τοπίο. @media. Αυτές οι γραμμές εμφανίζονται επίσης σε παρένθεση μετά από @media ομάδα. and. Μπορείτε να τα μοιραστείτε μέσω και.

Μια άλλη ενδιαφέρουσα απόχρωση. and вы вполне можете использовать оператор or. Αντ 'αυτού, και μπορείτε επίσης να χρησιμοποιήσετε το χειριστή ή. Χρειάζεται τουλάχιστον ένας όρος στην αίτηση για να είναι αληθινό! Για παράδειγμα:

) {} @media (max-width: 500px) ή (Προσανατολισμός: Κατακόρυφος) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Αν η οθόνη είναι μικρότερη από 500 px ή χρήση κατακόρυφο προσανατολισμό, οι τιράντες θα λάβει στυλ αποτέλεσμα.

Δεν Λέξη-κλειδί για την εξομάλυνση των βραχυχρόνιων διακυμάνσεων της ρευστότητας

not. Το ερώτημα μέσα μαζικής ενημέρωσης, μπορείτε να εισαγάγετε τη λέξη όχι. Αυτό γίνεται ως εξής:

@media (όχι max-width: 700px ) {}

Οι ιδιότητες ενεργοποιείται εάν το μέγιστο πλάτος δεν είναι ίση με 700 pixels.

χαρακτηριστικά των μέσων ενημέρωσης

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

• (о нем мы уже говорили); προσανατολισμό (έχουμε ήδη μιλήσει γι 'αυτό)?
• (ширина, ее тоже упоминали); πλάτος (πλάτος, είναι επίσης αναφέρεται)?
• (высота). ύψος (ύψος).

Ύψος χρησιμοποιείται σπάνια, αλλά υπάρχουν μερικές περιπτώσεις στις οποίες η ρύθμιση αυτή θα μπορούσε να είναι χρήσιμη.

Πώς και πού να τοποθετήσει τα αιτήματα;

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

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

div {

χρώμα: κόκκινο?

}

Αμέσως μετά το αίτημα αναφέρει:

@media (min-πλάτος: 320) {}

Ορίζει ιδιότητες.

Μια τέτοια προσέγγιση θα ήταν δύσκολη, αν χρησιμοποιείτε «καθαρή» css. Για την ενίσχυση του προεπεξεργαστή. Έχουν πολλές ενδιαφέρουσες ευκαιρίες για πιο ακριβή αιτήματα εφαρμογής.

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

Ποια να χρησιμοποιήσει; Όλα εξαρτώνται από τις προσωπικές προτιμήσεις και τα χαρακτηριστικά της ομάδας. Ίσως, στο χώρο της εργασίας σας έχει ένα συγκεκριμένο τρόπο τοποθέτησης ερωτήματα των μέσων ενημέρωσης θα γίνονται δεκτές.

Επίσης, μην ξεχνάτε ότι μπορείτε να απλοποιήσετε τη ζωή σας με το πιο πρόσφατο λογισμικό. Δεν είναι μόνο για το προεπεξεργαστή. Με Gulp Ομάδα CSS Media Queries μπορεί να κάνει τη διαδικασία πολύ πιο εύκολη. Συνιστάται να δαμάσει αυτό το εργαλείο ή των αναλόγων της.