CSS Sử dụng Biến trong Truy vấn Média

Sử dụng biến trong truy vấn phương tiện

Hiện tại, chúng ta muốn thay đổi giá trị biến trong truy vấn phương tiện.

Lưu ý:Truy vấn phương tiện được thiết kế để định nghĩa các quy tắc kiểu khác nhau cho các thiết bị khác nhau (màn hình, máy tính bảng, điện thoại di động, v.v.). Bạn có thể học thêm về truy vấn phương tiện trong chương "Truy vấn phương tiện".

Ở đây, chúng ta đầu tiên khai báo một biến cục bộ mới có tên là --fontsize cho lớp .container. Chúng ta đặt giá trị của nó là 25 pixel. Sau đó, chúng ta sử dụng nó thêm trong lớp .container. Sau đó, chúng ta tạo một quy tắc @media với nội dung là "Khi độ rộng của trình duyệt là 450px hoặc rộng hơn, thay đổi giá trị biến --fontsize của lớp .container thành 50px."

Đây là ví dụ hoàn chỉnh:

实例

/* 变量声明 */
: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;
  }
}

Thử nghiệm cá nhân

Đây là một ví dụ khác, trong đó chúng ta cũng đã thay đổi giá trị của biến --blue trong quy tắc @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;
  }
}

Thử nghiệm cá nhân

Hỗ trợ trình duyệt

Số trong bảng chú thích là phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Hàm
var() 49.0 15.0 31.0 9.1 36.0

Hàm CSS var()

Hàm Mô tả
var() Chèn giá trị của Biến CSS.