อยากทราบวิธีปรับ Font ให้ Responsive

[3uca]

ต้องไปตั้งค่าที่ HTML หรือ CSS ครับ ขอโค้ดหน่อย

ผมทดสอบโค้ดด้วยการย่อหน้าจอ Browser ตัวเองให้เล็กลงครับ

งงมาก ถ้าเป็นรูปภาพล่ะปรับง่ายมาก แต่พอเป็น font ล่ะ มันไม่ response เลย ขนาดเท่าเดิมตลอด

ขอบคุณครับ

[snappy]

ปรับในส่วนของ media query เลยครับ

โค้ด เลือก ขยาย


@media (max-width: 600px) {
  body{ font-size: 14px; }
}


อันนี้เป็นตัวอย่างง่ายๆนะครับ แต่เวลาทำผมทำจริงๆ จะกำหนด font เป็น em เพราะเวลาเปลี่ยนขนาดตัวอักษร จะง่ายมากผมเปลี่ยนแค่ body จุดเดียว ฟอร์นทุกหน้าเปลี่ยนหมด

[3uca]

ปรับในส่วนของ media query เลยครับ

โค้ด เลือก ขยาย


@media (max-width: 600px) {
  body{ font-size: 14px; }
}


อันนี้เป็นตัวอย่างง่ายๆนะครับ แต่เวลาทำผมทำจริงๆ จะกำหนด font เป็น em เพราะเวลาเปลี่ยนขนาดตัวอักษร จะง่ายมากผมเปลี่ยนแค่ body จุดเดียว ฟอร์นทุกหน้าเปลี่ยนหมด

รบกวนขอแบบละเอียดกว่านี้ได้ไหมครับ เอาโค้ดนี้ไปวางตรงไหน ต้องลบโค้ดตัวเก่าออกไหม ถ้าลบลบตัวไหน เรื่องนี้ผมมือใหม่จริงๆ

[vii]

เอาวิธีของผมนะ แรกเริ่ม ออกแบบจากหน้าจอขนาดมือถือเล็กๆก่อนเลย
กำหนดขนาดตายตัวลงไป เช่น

โค้ด เลือก ขยาย

body {
    font-size: 13px;
}

แล้วพอปรับหน้าจอใหญ่ขึ้น ค่อยใส่กำหนดขนาดใหม่ เช่น

โค้ด เลือก ขยาย

@media(min-width: 768px) {
    body {
        font-size: 1.05em;
    }
}

แบบนี้เป็นต้น. พอปรับจอใหญ่ขึ้นก็ค่อยเพิ่มเข้าไปเรื่อยๆ

[phpwin]

เอาวิธีของผมนะ แรกเริ่ม ออกแบบจากหน้าจอขนาดมือถือเล็กๆก่อนเลย
กำหนดขนาดตายตัวลงไป เช่น

โค้ด เลือก ขยาย

body {
   font-size: 13px;
}

แล้วพอปรับหน้าจอใหญ่ขึ้น ค่อยใส่กำหนดขนาดใหม่ เช่น

โค้ด เลือก ขยาย

@media(min-width: 768px) {
   body {
       font-size: 1.05em;
   }
}

แบบนี้เป็นต้น. พอปรับจอใหญ่ขึ้นก็ค่อยเพิ่มเข้าไปเรื่อยๆ

ตามนี้ครับ
สำหรับการใช้งาน ให้สร้างไฟล์ .css เพิ่มอีกไฟล์ก็ได้ครับ เช่น main.css
เวลาเรียกใช้งาน ให้ใช้คำสั่ง

โค้ด เลือก ขยาย

<link rel="stylesheet" type="text/css" href="main.css" />
ตามหลังคำสั่ง เรียกไฟล์ bootstrap.min.css

โค้ด เลือก ขยาย

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
เช่น

โค้ด เลือก ขยาย


<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="main.css" />


[cGame]

ลองทำแบบนี้ดูครับ
ถ้าต้องการปรับ h1 ให้มีขนาดเล็กลง เมื่อย่อจอ หรือเข้าผ่านมือถือ

โค้ด เลือก ขยาย

<h1>Hello</h1>

ใน head ด้านบนให้ใส่

โค้ด เลือก ขยาย

<link href="ลิ้งไฟล์ css" rel="stylesheet" media="screen">

จากนั้นในไฟล์ css เราก็เพิ่ม code นี้เข้าไป

โค้ด เลือก ขยาย


@media (max-width: 768px) {
h1{
font-size:16px;
}


เท่านี้ครับ เมื่อย่อจอแล้วตัวอักษร h1 ก็จะเล็กลงครับ