CSS Χρήση Παραμέτρων στις Εκτυπώσεις Μέσων

Χρήση μεταβλητών στις ερωτήσεις μέσων ενημέρωσης

Τώρα, θέλουμε να更改ίκαμε τις τιμές των μεταβλητών στις ερωτήσεις μέσων ενημέρωσης.

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

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

Αυτό είναι το πλήρες παράδειγμα:

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
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;
  }
}

Δοκιμάστε το Προσωπικά

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

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
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;
  }
}

Δοκιμάστε το Προσωπικά

Υποστήριξη Browser

Τα αριθμητικά στο πίνακα αναφέρουν την πρώτη έκδοση του browser που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Συνάρτηση
var() 49.0 15.0 31.0 9.1 36.0

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

Συνάρτηση Περιγραφή
var() Εισάγετε την τιμή της CSS Παράμετρος.