เรียนรู้ว่าจะสร้าง: ข้อความที่ตอบสนองต่อทัศน์

ขนาดตัวอักษรที่ตอบสนองต่อทัศน์

ขนาดตัวอักษรสามารถตั้งด้วย vw การตั้งหน่วยขนาด มันหมายความว่า “ความกว้างของ viewport”

ดังนั้น ขนาดของข้อความจะตามขนาดของหน้าต่างบราวเซอร์:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">ปรับขนาดหน้าต่างบราวเซอร์ของคุณ แล้วดูว่าขนาดตัวอักษรจะย่อยาวได้อย่างไร</p>

亲自试一试

หมายเหตุ：viewport คือขนาดของหน้าต่างบราวเซอร์。1vw = 1% ของความกว้างของ viewport ถ้าความกว้างของ viewport 50 เซนติเมตร แล้ว 1vw เป็น 0.5 เซนติเมตร。

เปลี่ยนขนาดตัวอักษรด้วยคำสั่ง media query

คุณยังสามารถใช้คำสั่ง media query มาเปลี่ยนขนาดตัวอักษรขององค์ประกอบในไซร์ด้านหน้าที่มีขนาดหน้าจอเฉพาะกาล:

ดูผลลัพธ์

/* ถ้าความกว้างของหน้าจอเท่า 601px หรือมากกว่า โปรดตั้ง font-size ของ <div> ให้เป็น 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* ถ้าความกว้างของหน้าจอเท่า 600px หรือน้อยกว่า โปรดตั้ง font-size ของ <div> ให้เป็น 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

亲自试一试

相关页面

教程：CSS 字体

教程：CSS 媒体查询