Ερωτήματα πολυμέσων σχεδίασης ιστοσελίδων απόκρισης
Πίνακας περιεχομένων
Τι είναι ένα ερώτημα μέσων;
Το ερώτημα μέσων είναι μια τεχνική CSS που εισήχθη στο CSS3.
Χρησιμοποιεί τον κανόνα @media για να συμπεριλάβει ένα μπλοκ ιδιοτήτων CSS μόνο εάν ορισμένη προϋπόθεση είναι αληθής.
Παράδειγμα
Εάν το παράθυρο του προγράμματος περιήγησης είναι 600 px ή μικρότερο, το χρώμα του φόντου θα είναι ανοιχτό μπλε:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Προσθέστε ένα σημείο διακοπής
Νωρίτερα σε αυτό το σεμινάριο φτιάξαμε μια ιστοσελίδα με γραμμές και στήλες και ανταποκρίθηκε, αλλά δεν φαινόταν καλή σε μικρή οθόνη.
Οι ερωτήσεις μέσων μπορούν να βοηθήσουν σε αυτό. Μπορούμε να προσθέσουμε ένα σημείο διακοπής όπου ορισμένα μέρη του σχεδίου θα συμπεριφέρονται διαφορετικά σε κάθε πλευρά του σημείου διακοπής.
Desktop
Phone
Χρησιμοποιήστε ένα ερώτημα πολυμέσων για να προσθέσετε ένα σημείο διακοπής στα 768 εικονοστοιχεία:
Παράδειγμα
Όταν η οθόνη (παράθυρο προγράμματος περιήγησης) γίνει μικρότερη από 768 εικονοστοιχεία, κάθε στήλη θα πρέπει να έχει πλάτος 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Always Design for Mobile First
Το Mobile First σημαίνει σχεδίαση για κινητά πριν από τη σχεδίαση για επιτραπέζιους υπολογιστές ή για οποιοδήποτε άλλο άλλη συσκευή (Αυτό θα κάνει τη σελίδα να εμφανίζεται πιο γρήγορα σε μικρότερες συσκευές).
Αυτό σημαίνει ότι πρέπει να κάνουμε κάποιες αλλαγές στο CSS μας.
Αντί να αλλάζετε στυλ όταν το πλάτος γίνεται μικρότερο από 768 px, θα πρέπει να αλλάξουμε το σχέδιο όταν το πλάτος γίνει μεγαλύτερο από 768 εικονοστοιχεία. Αυτό θα κάνει το σχέδιό μας Mobile First:
Παράδειγμα
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Άλλο ένα σημείο διακοπής
Μπορείτε να προσθέσετε όσα σημεία διακοπής θέλετε.
Θα εισαγάγουμε επίσης ένα σημείο διακοπής μεταξύ tablet και κινητών τηλεφώνων.
Desktop
Tablet
Phone
Αυτό το κάνουμε προσθέτοντας ένα ακόμη ερώτημα πολυμέσων (στα 600 εικονοστοιχεία) και ένα σύνολο νέων κλάσεων για συσκευές μεγαλύτερες από 600 εικονοστοιχεία (αλλά μικρότερο από 768 px):
Παράδειγμα
Σημειώστε ότι τα δύο σύνολα κλάσεων είναι σχεδόν πανομοιότυπα, τα μόνα Η διαφορά είναι το όνομα (col- και col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}Μπορεί να φαίνεται περίεργο το ότι έχουμε δύο σετ πανομοιότυπων κλάσεων, αλλά μας δίνει το ευκαιρία σε HTML, να αποφασίσετε τι θα συμβεί με τις στήλες σε καθεμία σημείο διακοπής:
Παράδειγμα HTML
Για υπολογιστές:
Το πρώτο και το τρίτο τμήμα θα εκτείνονται σε 3 στήλες το καθένα. Το μεσαίο τμήμα θα εκτείνεται σε 6 στήλες.
Για tablet:
Η πρώτη ενότητα θα εκτείνεται σε 3 στήλες, η δεύτερη θα εκτείνεται σε 9 και η τρίτη ενότητα θα εμφανίζεται κάτω από τις δύο πρώτες ενότητες και θα εκτείνεται σε 12 στήλες:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Τυπικά σημεία διακοπής συσκευής
Υπάρχουν τόνοι οθονών και συσκευών με διαφορετικά ύψη και πλάτη, επομένως είναι δύσκολο να δημιουργηθεί ένα ακριβές σημείο διακοπής για κάθε συσκευή. Για να κρατήσετε τα πράγματα απλά, θα μπορούσατε να στοχεύσετε πέντε ομάδες:
Παράδειγμα
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</style>
</head>
<body>
<h2>Typical Media Query Breakpoints</h2>
<p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>
</body>
</html>
Προσανατολισμός: Πορτραίτο/Τοπίο
Τα ερωτήματα πολυμέσων μπορούν επίσης να χρησιμοποιηθούν για την αλλαγή της διάταξης μιας σελίδας ανάλογα με το προσανατολισμό του προγράμματος περιήγησης.
Μπορείτε να έχετε ένα σύνολο ιδιοτήτων CSS που θα το κάνουν μόνο εφαρμόζεται όταν το παράθυρο του προγράμματος περιήγησης είναι μεγαλύτερο από το ύψος του, το λεγόμενο "Τοπίο" προσανατολισμός:
Παράδειγμα
Η ιστοσελίδα θα έχει ανοιχτό μπλε φόντο εάν ο προσανατολισμός είναι σε οριζόντια λειτουργία:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Απόκρυψη στοιχείων με ερωτήματα πολυμέσων
Μια άλλη κοινή χρήση των ερωτημάτων πολυμέσων είναι η απόκρυψη στοιχείων σε διαφορετικά μεγέθη οθόνης:
Παράδειγμα
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: yellow;
padding: 20px;
}
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is 600px wide or less, hide the div element. Resize the browser window to see the effect.</p>
</body>
</html>
Αλλαγή μεγέθους γραμματοσειράς με ερωτήματα πολυμέσων
Μπορείτε επίσης να χρησιμοποιήσετε ερωτήματα πολυμέσων για να αλλάξετε το μέγεθος γραμματοσειράς ενός στοιχείου διαφορετικά μεγέθη οθόνης:
Variable Font Size.
Παράδειγμα
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
{
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
</style>
</head>
<body>
<h2>Change the font size of an element on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is 600px wide or less, set the font-size of DIV to 30px. When it is 601px or wider, set the font-size to 80px. Resize the browser window to see the effect.</p>
</body>
</html>
Αναφορά CSS @media
Για μια πλήρη επισκόπηση όλων των τύπων μέσων και των χαρακτηριστικών/εκφράσεων, ανατρέξτε στο Κανόνας @media στην αναφορά μας στο CSS.