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 tôi muốn thay đổi giá trị biến bên trong truy vấn phương tiện.
Mẹo: Truy vấn phương tiện nhằm 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 lớp .container
. Chúng tôi đặt giá trị của nó thành 25 pixel. Sau đó, chúng tôi sử dụng nó trong lớp .container
ở phía dưới. Sau đó, chúng tôi tạo quy tắc @media
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 lớp .container
thành 50px."
Đây là ví dụ hoàn chỉnh:
Ví 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;
}
}
Hãy tự mình thử » Đây là một ví dụ khác trong đó chúng tôi cũng thay đổi giá trị của biến --blue trong quy tắc @media
:
Ví 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ãy tự mình thử »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 đủ hàm var()
.
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 |