ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: 3uca ที่ 03 สิงหาคม 2014, 21:44:51


หัวข้อ: อยากทราบวิธีปรับ Font ให้ Responsive
เริ่มหัวข้อโดย: 3uca ที่ 03 สิงหาคม 2014, 21:44:51
ต้องไปตั้งค่าที่ HTML หรือ CSS ครับ ขอโค้ดหน่อย

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

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

ขอบคุณครับ

หัวข้อ: Re: อยากทราบวิธีปรับ Font ให้ Responsive
เริ่มหัวข้อโดย: snappy ที่ 03 สิงหาคม 2014, 22:22:23
ปรับในส่วนของ media query เลยครับ

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

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

หัวข้อ: Re: อยากทราบวิธีปรับ Font ให้ Responsive
เริ่มหัวข้อโดย: 3uca ที่ 05 สิงหาคม 2014, 09:24:02
อ้างจาก: snappy ที่ 03 สิงหาคม 2014, 22:22:23
ปรับในส่วนของ media query เลยครับ

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

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

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

หัวข้อ: Re: อยากทราบวิธีปรับ Font ให้ Responsive
เริ่มหัวข้อโดย: vii ที่ 07 สิงหาคม 2014, 13:08:32
เอาวิธีของผมนะ แรกเริ่ม ออกแบบจากหน้าจอขนาดมือถือเล็กๆก่อนเลย
กำหนดขนาดตายตัวลงไป เช่น
โค๊ด:
body {
    font-size: 13px;
}

แล้วพอปรับหน้าจอใหญ่ขึ้น ค่อยใส่กำหนดขนาดใหม่ เช่น
โค๊ด:
@media(min-width: 768px) {
    body {
        font-size: 1.05em;
    }
}

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

หัวข้อ: Re: อยากทราบวิธีปรับ Font ให้ Responsive
เริ่มหัวข้อโดย: phpwin ที่ 07 สิงหาคม 2014, 14:09:42
อ้างจาก: vii ที่ 07 สิงหาคม 2014, 13:08:32
เอาวิธีของผมนะ แรกเริ่ม ออกแบบจากหน้าจอขนาดมือถือเล็กๆก่อนเลย
กำหนดขนาดตายตัวลงไป เช่น
โค๊ด:
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" />

หัวข้อ: Re: อยากทราบวิธีปรับ Font ให้ Responsive
เริ่มหัวข้อโดย: cGame ที่ 13 สิงหาคม 2014, 12:58:14
ลองทำแบบนี้ดูครับ
ถ้าต้องการปรับ h1 ให้มีขนาดเล็กลง เมื่อย่อจอ หรือเข้าผ่านมือถือ
โค๊ด:
<h1>Hello</h1>

ใน head ด้านบนให้ใส่
โค๊ด:
<link href="ลิ้งไฟล์ css" rel="stylesheet" media="screen">

จากนั้นในไฟล์ css เราก็เพิ่ม code นี้เข้าไป
โค๊ด:
@media (max-width: 768px) {
	h1{
		font-size:16px;
	}

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

 :wanwan003: :wanwan003:


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com