CSS sử dụng biến trong truy vấn phương tiện
Sử dụng biến trong truy vấn phương tiện
Bây giờ chúng ta muốn thay đổi một giá trị biến bên trong một truy vấn phương tiện.
Mẹo: Truy vấn phương tiện là xác định 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ể tìm hiểu thêm Truy vấn Phương tiện trong Chương Truy vấn Phương tiện của chúng tôi .
Ở đây, trước tiên chúng ta khai báo một biến cục bộ mới có tên --fontsize cho
.container
lớp. Chúng tôi đặt giá trị của nó là 25 pixel. Sau đó, chúng tôi sử dụng nó trong
.container
lớp sâu hơn. Sau đó, chúng tôi tạo một
@media
quy tắc có nội dung "Khi chiều rộng của trình duyệt là 450px hoặc rộng hơn, hãy thay đổi giá trị biến --fontsize của
.container
lớp thành 50px."
Đây là ví dụ đầy đủ:
Thí dụ
/* 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;
}
}
Đây là một ví dụ khác, nơi chúng tôi cũng thay đổi giá trị của biến --blue trong @media
quy tắc:
Thí dụ
/* 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;
}
}
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ
var()
chức năng.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Hàm CSS var ()
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |