Όταν κατασκευάζουμε μια ιστοσελίδα είναι απαραίτητο να φροντίζουμε ώστε αυτή να είναι ‘responsive’, δηλαδή να έχει σωστή εμφάνιση σε όλες τις συσκευές (κινητό τηλέφωνο, tablet και υπολογιστή). Ένα αναγκαίο «κακό» κατά τη διάρκεια κατασκευής responsive ιστοσελίδας είναι ότι πρέπει συνεχώς να αλλάζουμε το μέγεθος του browser προκειμένου να βλέπουμε πως αποκρίνεται η ιστοσελίδα στα διάφορα πλάτη του browser.
Δημιούργησα λοιπόν ένα μικρό οπτικό βοήθημα – εργαλείο που ανά πάσα στιγμή δείχνει στο κάτω αριστερό μέρος της ιστοσελίδας, σε ποιο media query ‘βρισκόμαστε’ και έχει την εξής εμφάνιση:
Για να το χρησιμοποιήσετε κι εσείς, προσθέστε τον παρακάτω κώδικα προς το τέλος της ‘index/home’ σελίδας σας (π.χ. λίγο πριν το κλείσιμο του <body>
):
1 2 3 4 5 6 7 8 |
<div id="screen-size-info"> <div class="mobile">mobile-first</div> <div class="min-400">min-width: 400px</div> <div class="min-550">min-width: 550px</div> <div class="min-750">min-width: 750px</div> <div class="min-1000">min-width: 1000px</div> <div class="min-1200">min-width: 1200px</div> </div> |