Ερωτήματα μέσων CSS3 - Παραδείγματα
Πίνακας περιεχομένων
Ερωτήματα μέσων CSS - Περισσότερα παραδείγματα
Ας δούμε μερικά ακόμη παραδείγματα χρήσης ερωτημάτων πολυμέσων.
Τα ερωτήματα πολυμέσων είναι μια δημοφιλής τεχνική για την παράδοση ενός προσαρμοσμένου φύλλου στυλ σε διαφορετικές συσκευές. Για να δείξουμε ένα απλό παράδειγμα, μπορούμε να αλλάξουμε το χρώμα φόντου για διαφορετικές συσκευές:
Παράδειγμα
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On
screens that are 992px or less, set the background color to blue */
@media
screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less,
set the
background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: tan;
color: black;
}
/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
color: white;
}
}
/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
color: white;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>By default, the background color of the document is "tan". If the screen size is 992px or less, the color will change to "blue". If it is 600px or less, it will change to "olive".</p>
</body>
</html>
Αναρωτιέστε γιατί χρησιμοποιούμε ακριβώς 992px και 600px; Είναι αυτό που ονομάζουμε "τυπικά σημεία διακοπής" για συσκευές. Μπορείτε να διαβάσετε περισσότερα σχετικά με τα τυπικά σημεία διακοπής στο σεμινάριο Responsive Web Design.
Ερωτήματα πολυμέσων για μενού
Σε αυτό το παράδειγμα, χρησιμοποιούμε ερωτήματα πολυμέσων για να δημιουργήσουμε ένα αποκριτικό μενού πλοήγησης, το οποίο ποικίλλει ως προς το σχεδιασμό σε διαφορετικά μεγέθη οθόνης.
Μεγάλες οθόνες:
Μικρές οθόνες:
Παράδειγμα
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less, make the menu links stack on top
of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width:
100%;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive navigation menu</h2>
<p>Resize the browser window to see the effect: When the screen is less than 600px, the navigation menu will be displayed vertically instead of horizontally.</p>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</body>
</html>
Ερωτήματα πολυμέσων για στήλες
Μια κοινή χρήση των ερωτημάτων μέσων είναι η δημιουργία μιας ευέλικτης διάταξης. Σε αυτό το παράδειγμα, δημιουργούμε μια διάταξη που ποικίλλει μεταξύ τεσσάρων, δύο στηλών και πλήρους πλάτους, ανάλογα με τα διαφορετικά μεγέθη οθόνης:
Large screens:
Medium screens:
Small screens:
Παράδειγμα
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px
wide or less, go from
four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are
600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width:
100%;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
Συμβουλή: Ένας πιο σύγχρονος τρόπος δημιουργίας διατάξεων στηλών είναι η χρήση του CSS Flexbox (δείτε παράδειγμα παρακάτω). Ωστόσο, δεν υποστηρίζεται στον Internet Explorer 10 και παλαιότερες εκδόσεις. Εάν χρειάζεστε υποστήριξη IE6-10, χρησιμοποιήστε πλωτήρες (όπως φαίνεται παραπάνω).
Για να μάθετε περισσότερα σχετικά με τη μονάδα ευέλικτης διάταξης πλαισίου, διαβάστε το κεφάλαιο CSS Flexbox.
Για να μάθετε περισσότερα σχετικά με το Responsive Web Design, διαβάστε το σεμινάριο Responsive Web Design.
Παράδειγμα
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from
four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout with Flex</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
Απόκρυψη στοιχείων με ερωτήματα πολυμέσων
Μια άλλη κοινή χρήση των ερωτημάτων πολυμέσων είναι η απόκρυψη στοιχείων σε διαφορετικά μεγέθη οθόνης:
Παράδειγμα
/* If the screen size is 600px wide or less, hide the element */
@media
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 screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width:
600px) {
div.example {
font-size: 80px;
}
}
/* If screen size is 600px wide, or less,
set the font-size of <div> to 30px */
@media 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>
Ευέλικτη Συλλογή εικόνων
Σε αυτό το παράδειγμα, χρησιμοποιούμε ερωτήματα πολυμέσων μαζί με το flexbox για να δημιουργήσουμε μια αποκριτική συλλογή εικόνων:
Παράδειγμα
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>
</body>
</html>
Ευέλικτη Ιστοσελίδα
Σε αυτό το παράδειγμα, χρησιμοποιούμε ερωτήματα πολυμέσων μαζί με το flexbox για να δημιουργήσουμε έναν αποκριτικό ιστότοπο, ο οποίος περιέχει μια ευέλικτη γραμμή πλοήγησης και ευέλικτο περιεχόμενο.
Παράδειγμα
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>
<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</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>
Ελάχιστο πλάτος έως μέγιστο πλάτος
Μπορείτε επίσης να χρησιμοποιήσετε τα (max-width: ..) και (min-width: ..) τιμές για να ορίσετε ένα ελάχιστο πλάτος και ένα μέγιστο πλάτος.
Για παράδειγμα, όταν το πλάτος του προγράμματος περιήγησης είναι μεταξύ 600 και 900 εικονοστοιχείων, αλλάξτε το εμφάνιση στοιχείου <div>:
Παράδειγμα
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
</style>
</head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is between 600 and 900px, change the appearance of DIV.
<strong>Resize the browser window to see the effect</strong>.</p>
</body>
</html>
Χρησιμοποιώντας μια πρόσθετη τιμή: Στο παρακάτω παράδειγμα, προσθέτουμε ένα επιπλέον ερώτημα πολυμέσων στο ήδη υπάρχον χρησιμοποιώντας κόμμα (αυτό θα συμπεριφέρεται σαν τελεστής OR):
Παράδειγμα
/* When the width is between 600px and 900px OR above 1100px
- change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width:
600px), (min-width:
1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example{
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
</style>
</head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is between 600 and 900px OR above 1100px, change the appearance of DIV.
<strong>Resize the browser window to see the effect</strong>.</p>
</body>
</html>
Αναφορά CSS @media
Για μια πλήρη επισκόπηση όλων των τύπων μέσων και των χαρακτηριστικών/εκφράσεων, ανατρέξτε στο Κανόνας @media στην αναφορά μας στο CSS.
Συμβουλή: Για να μάθετε περισσότερα σχετικά με την αποκριτική σχεδίαση ιστού (πώς να στοχεύσετε διαφορετικές συσκευές και οθόνες), χρησιμοποιώντας σημεία διακοπής ερωτημάτων μέσων, διαβάστε το Οδηγό Responsive Web Design.