Όταν κατασκευάζουμε μια ιστοσελίδα είναι απαραίτητο να φροντίζουμε ώστε αυτή να είναι ‘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> |
Στη συνέχεια στο .sass αρχείο σας προσθέτετε τον εξής κώδικα:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
#screen-size-info { background-color: orange; border-top: 2px solid #333; border-right: 2px solid #333; color: #333; position: fixed; bottom: 0; left: 0; z-index: 999; &> div { margin: 10px 20px; } .mobile { display: block; } .min-400 { display: none; } .min-550 { display: none; } .min-750 { display: none; } .min-1000 { display: none; } .min-1200 { display: none; } } /* Larger than mobile */ @media (min-width: 400px) { #screen-size-info { background-color: yellow; .mobile { display: none; } .min-400 { display: block; } .min-550 { display: none; } .min-750 { display: none; } .min-1000 { display: none; } .min-1200 { display: none; } } } /* Larger than phablet */ @media (min-width: 550px) { #screen-size-info { background-color: tan; .mobile { display: none; } .min-400 { display: none; } .min-550 { display: block; } .min-750 { display: none; } .min-1000 { display: none; } .min-1200 { display: none; } } } /* Larger than tablet */ @media (min-width: 750px) { #screen-size-info { background-color: greenyellow; .mobile { display: none; } .min-400 { display: none; } .min-550 { display: none; } .min-750 { display: block; } .min-1000 { display: none; } .min-1200 { display: none; } } } /* Larger than desktop (also point when grid becomes active) */ @media (min-width: 1000px) { #screen-size-info { background-color: teal; .mobile { display: none; } .min-400 { display: none; } .min-550 { display: none; } .min-750 { display: none; } .min-1000 { display: block; } .min-1200 { display: none; } } } /* Larger than Desktop HD */ @media (min-width: 1200px) { #screen-size-info { background-color: pink; .mobile { display: none; } .min-400 { display: none; } .min-550 { display: none; } .min-750 { display: none; } .min-1000 { display: none; } .min-1200 { display: block; } } } |
Πλέον, κάθε φορά που αλλάζετε το μέγεθος του browser, θα εμφανίζεται κάτω αριστερά μια ένδειξη όπως αυτή:
Μπορείτε φυσικά να αλλάξετε τα media queries και να βάλετε όποια θέλετε εσείς. Η ουσία είναι ότι όταν ελέγχετε την ιστοσελίδα σας, ανά πάσα στιγμή έχετε ένδειξη για το media query στο οποίο βρίσκεται το site.
