CSS การใช้ตัวแปรในแบบสอบถามสื่อ
การใช้ตัวแปรในแบบสอบถามสื่อ
ตอนนี้ เราต้องการเปลี่ยนค่าตัวแปรภายในแบบสอบถามสื่อ
เคล็ดลับ: Media Queries เกี่ยวกับการกำหนดกฎของสไตล์ที่แตกต่างกันสำหรับอุปกรณ์ต่างๆ (หน้าจอ แท็บเล็ต โทรศัพท์มือถือ ฯลฯ) คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Media Queries ได้ในบท Media Queriesของ เรา
ที่นี่ ก่อนอื่นเราประกาศตัวแปรโลคัลใหม่ชื่อ --fontsize สำหรับ
.containerคลาส เราตั้งค่าเป็น 25 พิกเซล จากนั้นเราก็นำไปใช้ใน
.containerชั้นเรียนต่อไป ด้านล่าง จากนั้น เราสร้าง
@mediaกฎที่ระบุว่า "เมื่อเบราว์เซอร์มีความกว้าง 450px หรือกว้างกว่า ให้เปลี่ยนค่าตัวแปร --fontsize ของ
.containerคลาสเป็น 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;
}
}
นี่เป็นอีกตัวอย่างหนึ่งที่เราเปลี่ยนค่าของตัวแปร --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;
}
}
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับ
var()ฟังก์ชันนี้ อย่างเต็มที่
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() ฟังก์ชัน
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |