How TO - ข้อความตอบสนอง
เรียนรู้วิธีสร้างตัวพิมพ์ที่ตอบสนองด้วย CSS
สวัสดีชาวโลก
ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าขนาดแบบอักษรปรับขนาดอย่างไร
ขนาดตัวอักษรที่ตอบสนอง
ขนาดข้อความสามารถกำหนดได้ด้วยvw
หน่วย ซึ่งหมายถึง "ความกว้างของวิวพอร์ต"
ด้วยวิธีนี้ ขนาดข้อความจะเป็นไปตามขนาดของหน้าต่างเบราว์เซอร์:
ตัวอย่าง
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
วิวพอร์ตคือขนาดหน้าต่างเบราว์เซอร์ 1vw = 1% ของความกว้างวิวพอร์ต หากวิวพอร์ตกว้าง 50 ซม. 1vw คือ 0.5 ซม.
เปลี่ยนขนาดตัวอักษรด้วย Media Queries
คุณยังสามารถใช้การสืบค้นสื่อเพื่อเปลี่ยนขนาดฟอนต์ขององค์ประกอบบนขนาดหน้าจอเฉพาะได้:
ขนาดตัวอักษรตัวแปร
ตัวอย่าง
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
เคล็ดลับ: ไปที่บทช่วยสอนแบบอักษร CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแบบอักษร
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสืบค้นสื่อ โปรดอ่าน บทแนะนำ การสืบค้นสื่อ CSS