Τι είναι ένα CSS Media Query;

Ένα CSS media query είναι μια τεχνική που σας επιτρέπει να εφαρμόσετε διαφορετικά στυλ με βάση τα χαρακτηριστικά της συσκευής, όπως το μέγεθος της οθόνης, η ανάλυση, ο προσανατολισμός ή το χρωματικό σχήμα. Τα media queries είναι το θεμέλιο του responsive web design, επιτρέποντας στους ιστότοπους να προσαρμόσουν τη διάταξη και την εμφάνισή τους σε διαφορετικές συσκευές - από smartphones έως desktop monitors. Χρησιμοποιούν τον κανόνα @media στο CSS για να εφαρμόσουν υπό όρους στυλ μόνο όταν πληρούνται ορισμένες συνθήκες.

Περιγραφή Εργαλείου

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

Χαρακτηριστικά

  • Επιλογή Media Type: Επιλέξτε μεταξύ all, screen, print ή speech media types
  • Έλεγχοι Διαστάσεων: Ορίστε ελάχιστο και μέγιστο πλάτος/ύψος με οποιαδήποτε CSS μονάδα (px, em, rem, vw, κ.λπ.)
  • Χαρακτηριστικά Συσκευής: Διαμορφώστε τον προσανατολισμό, την αναλογία διαστάσεων, την ανάλυση και τις προτιμήσεις χρωματικού σχήματος