CSS με χρήση μεταβλητών σε ερωτήματα πολυμέσων

Πίνακας περιεχομένων

Χρήση μεταβλητών σε ερωτήματα πολυμέσων

Τώρα θέλουμε να αλλάξουμε μια τιμή μεταβλητής μέσα σε ένα ερώτημα πολυμέσων.

Συμβουλή: Τα ερωτήματα πολυμέσων αφορούν τον καθορισμό διαφορετικών κανόνων στυλ για διαφορετικές συσκευές (οθόνες, tablet, κινητά τηλέφωνα κ.λπ.). Μπορείτε να μάθετε περισσότερα Ερωτήματα πολυμέσων στο Κεφάλαιό μας Ερωτήματα μέσων.

Εδώ, πρώτα δηλώνουμε μια νέα τοπική μεταβλητή με το όνομα --fontsize για το .container class. Ορίσαμε την τιμή του στα 25 pixel. Στη συνέχεια το χρησιμοποιούμε στο .container τάξη πιο κάτω. Στη συνέχεια, δημιουργούμε ένα κανόνας @media που λέει "Όταν το πλάτος του προγράμματος περιήγησης είναι 450 px ή μεγαλύτερη, αλλάξτε την τιμή της μεταβλητής --fontsize του .container class σε 50px."

Εδώ είναι το πλήρες παράδειγμα:

Παράδειγμα

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
body {
  
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container 
  {
  color: var(--blue);
  background-color: var(--white);
  
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 
  450px) {
  
  .container {
    --fontsize: 50px;
  }
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is less than 450px, the font-size of this div is 25px. When it is 450px or wider, set the --fontsize variable value to 50px. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

Εδώ είναι ένα άλλο παράδειγμα όπου αλλάζουμε επίσης την τιμή της μεταβλητής --blue στον κανόνα @media:

Παράδειγμα

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
body {
  
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container 
  {
  color: var(--blue);
  background-color: var(--white);
  
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 
  450px) {
  
  .container {
    --fontsize: 50px;
  }
   
  :root {
    --blue: lightblue;
  }
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
  :root {
    --blue: lightblue;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is 450px or wider, set the --fontsize variable value to 50px and the --blue variable value to lightblue. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το Συνάρτηση var().

Function
var()	49.0	15.0	31.0	9.1	36.0

Συνάρτηση CSS var().

var(): Εισάγει την τιμή μιας μεταβλητής CSS