การจัดรูปแบบข้อความที่ปรับเปลี่ยนตามอุปกรณ์และเป็นแบบไหลด้วยฟีเจอร์ CSS พื้นฐาน

Miriam Suzanne

เผยแพร่: 16 ธันวาคม 2025

การออกแบบเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์เป็นแนวทางในการสร้างเว็บไซต์ที่ดูดีและทํางานได้ดีในเบราว์เซอร์ ขนาดวิวพอร์ต อุปกรณ์ และค่ากําหนดของผู้ใช้ที่หลากหลาย เมื่อนำไปใช้กับตัวอักษร ข้อกังวลหลักมักเป็นการปรับ font-size ตามความกว้างของเบราว์เซอร์ ซึ่งอาจส่งผลต่อค่าการเว้นวรรค เช่น line-height และ margin ด้วย

ในฐานะนักออกแบบ คุณควรพิจารณาว่ามีพื้นที่ใดบ้างในเบราว์เซอร์ และปรับการจัดรูปแบบตัวอักษรให้สอดคล้องกัน นอกจากนี้ คุณยังต้องคำนึงถึงว่าผู้ใช้แต่ละรายจะมีfont-sizeความต้องการที่แตกต่างกันในอุปกรณ์ต่างๆ โดยขึ้นอยู่กับสถานการณ์ส่วนตัวที่คุณไม่สามารถเข้าถึงหรือรับรู้ได้ ดังนั้นจึงเป็นเรื่องอันตรายที่จะทำสิ่งใดก็ตามที่จะนำการควบคุมผลลัพธ์สุดท้ายของผู้ใช้ออกไป ผู้ใช้สามารถใช้ข้อมูลป้อนเข้าหลัก 2 อย่างเพื่อส่งผลต่อขนาดแบบอักษรขณะท่องเว็บ ได้แก่

• ระบุค่ากำหนด font-size เริ่มต้นในทุกเว็บไซต์
• ซูมเข้าหรือออกในแต่ละเว็บไซต์

เป้าหมายของการสาธิตนี้คือการทำให้การจัดรูปแบบข้อความตอบสนองต่อทั้งขนาดวิวพอร์ตของเบราว์เซอร์และอินพุตของผู้ใช้ แต่คุณควรทราบว่ายิ่งการจัดตัวอักษรตอบสนองต่อวิวพอร์ตมากเท่าใด การจัดตัวอักษรก็จะยิ่งตอบสนองต่อค่ากําหนดของผู้ใช้น้อยลงเท่านั้น หากจะใช้การจัดรูปแบบตัวอักษรที่ตอบสนอง คุณควรทำอย่างระมัดระวังและทดสอบว่าผลลัพธ์ยังคงเข้าถึงได้

เจรจาต่อรองfont-sizeพื้นฐานตามค่ากำหนดของผู้ใช้

ขั้นตอนแรกในการกำหนดการจัดรูปแบบข้อความออนไลน์คือการเจรจาต่อรองขนาดแบบอักษรเริ่มต้นตามfont-sizeค่ากำหนดของผู้ใช้ แบบอักษรนี้จะใช้กับข้อความส่วนใหญ่ในหน้าเว็บ และเป็นพื้นฐานสำหรับขนาดแบบอักษรอื่นๆ เช่น ส่วนหัว ตัวเลือกที่ง่ายที่สุดในที่นี้คือการให้สิทธิ์ควบคุมแก่ผู้ใช้โดยสมบูรณ์โดยใช้ 1em โดยไม่ต้องปรับเปลี่ยนใดๆ เมื่อคุณไม่ได้ตั้งค่า font-size อื่นๆ 1em จะอ้างอิงถึงค่ากําหนดของผู้ใช้ ในอีกด้านหนึ่ง การตั้งค่า font-size เป็นพิกเซลหรือหน่วยสัมบูรณ์อื่นๆ (และแม้แต่หน่วยที่สัมพันธ์กับวิวพอร์ต) จะลบล้างการตั้งค่าของผู้ใช้ทั้งหมด ซึ่งควรหลีกเลี่ยง

อย่างไรก็ตาม กรณีการใช้งานที่แตกต่างกันต้องใช้การจัดรูปแบบตัวอักษรที่แตกต่างกัน บทความอาจอ่านง่ายขึ้นในข้อความขนาดใหญ่ ในขณะที่เว็บไซต์ที่มีข้อมูลจำนวนมากอาจต้องใช้การออกแบบที่กะทัดรัดมากขึ้นพร้อมข้อความขนาดเล็ก ไม่ว่าจะในกรณีใด คุณอาจต้องการแนะนำค่าเริ่มต้นที่เหมาะกับการออกแบบ ในขณะที่ยังคงอนุญาตให้ผู้ใช้ปรับผลลัพธ์ตามสถานการณ์เฉพาะของตนเองได้

ตัวเลือกที่ 1: คำนวณตัวคูณตามสมมติฐาน

การประนีประนอมที่พบบ่อยอย่างหนึ่งคือการกำหนด font-size ที่ปรับแล้วในหน่วย em หรือ % โดยอิงตาม font-size เริ่มต้นของผู้ใช้ โดยทั่วไปแล้ว วิธีนี้จะเริ่มต้นด้วยสมมติฐานที่ว่าเบราว์เซอร์มี16pxเริ่มต้น และผู้ใช้ส่วนใหญ่จะปล่อยให้เป็นค่าเริ่มต้นนั้น หากคิดว่า20pxขนาดแบบอักษรfont-sizeจะเหมาะกับเว็บไซต์ของคุณมากกว่า 1.25em หรือ 125% มักจะให้ผลลัพธ์ที่คุณต้องการ

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

คุณยังใช้ฟังก์ชัน calc() ที่นี่เพื่อแสดงการคำนวณได้ด้วย แต่คุณยังคงต้องทราบสมการ ซึ่งก็คือขนาดเป้าหมาย หารด้วยขนาดที่คาดไว้ คูณด้วย 1em

html {
  font-size: calc(20 / 16 * 1em);
}

ผู้ใช้ที่มีค่ากำหนดสูงหรือต่ำกว่าจะมีความสามารถในการส่งผลต่อผลลัพธ์ เนื่องจากตอนนี้ค่าเริ่มต้นของคุณจะสัมพันธ์กับค่ากำหนดของผู้ใช้ ซึ่งในกรณีนี้คือ 1.25 เท่าของค่ากำหนดของผู้ใช้ แต่ก็อาจดูแปลกหากทั้งคุณและผู้ใช้ขอค่าเริ่มต้น 20px และผลลัพธ์คือ 25px ซึ่งเป็นเวลาเริ่มต้นที่ปรับแล้วคูณด้วย 1.25 อีกครั้ง ซึ่งเป็นขนาดที่ไม่มีใครต้องการ

ตัวเลือกที่ 2: ให้ clamp() จัดการให้

แนวทางที่ซับซ้อนกว่านั้นเกี่ยวข้องกับฟังก์ชันการเปรียบเทียบ CSS โดยไม่ต้องใช้คณิตศาสตร์ แทนที่จะถือว่า 1em เท่ากับ 16px และทำการแปลงจาก px เป็น em ที่ไม่น่าเชื่อถือ คุณสามารถคิดว่า 1em เป็นตัวแปรที่อ้างอิงถึงค่ากำหนดของผู้ใช้ ไม่ว่าค่าพิกเซลของ 1em จะเป็นเท่าใด font-size ของ max(1em, 20px) จะแสดงค่าที่ใหญ่กว่าเสมอระหว่างค่าที่ต้องการในการออกแบบ (20px) กับค่าที่ผู้ใช้ต้องการ (1em) ซึ่งจะช่วยให้ผู้ใช้เลือกขนาดแบบอักษรที่ใหญ่ขึ้นได้ แต่จะเลือกขนาดที่เล็กลงไม่ได้

การเปลี่ยนไปใช้ฟังก์ชัน clamp() จะช่วยให้ผู้ใช้ปรับขนาดได้ทั้ง 2 ทิศทางเมื่อขนาดที่ต้องการอยู่ห่างจากค่าเริ่มต้นที่คุณเลือกมากเกินไป ตัวอย่างเช่น font-size ของ clamp(1em, 20px, 1.25em) จะมีค่าเริ่มต้นเป็น 20px ตราบใดที่ค่าดังกล่าวมากกว่าค่าเริ่มต้นของผู้ใช้ แต่ไม่เกิน 125% ของค่าเริ่มต้น

ซึ่งจะช่วยให้การออกแบบของคุณมีความสำคัญเป็นอันดับแรกเมื่อใกล้เคียงกับค่ากำหนดของผู้ใช้ แต่ผู้ใช้จะยังคงมีความสำคัญเป็นอันดับแรกเมื่อค่ากำหนดของผู้ใช้อยู่นอกช่วงที่ระบุ ไม่มีการคำนวณ Conversion ไม่มีการคาดคะเนขนาดค่ากำหนดของผู้ใช้ และไม่มีการคูณค่าของดีไซเนอร์และผู้ใช้

การตั้งค่านี้เป็นรูท font-size ในองค์ประกอบ html จะช่วยให้คุณอ้างอิง 1rem ได้ทุกที่ในเว็บไซต์เป็นขนาดฐานที่เจรจา

เพิ่มการตอบสนอง

หากต้องการให้ font-size ตอบสนองต่อวิวพอร์ต ตัวเลือกหนึ่งคือการเพิ่มจุดพักของ Media Query (หรือ Container Query) เช่น คุณอาจเปลี่ยนค่าที่ยึดตามขนาดหน้าจอได้ดังนี้

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

อีกตัวเลือกหนึ่งคือการเพิ่มหน่วยวิวพอร์ตหรือคอนเทนเนอร์ลงในค่าฐานแบบคงที่

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

หน่วย vw (ความกว้างของวิวพอร์ต) หรือ vi (ขนาดแบบอินไลน์ของวิวพอร์ต) แสดงถึง 1% ของวิวพอร์ตทั้งหมด ซึ่งเป็นส่วนของเบราว์เซอร์ที่แสดงผลเว็บไซต์ ในทำนองเดียวกัน หน่วย cqw และ cqi จะแสดงถึง 1% ของคอนเทนเนอร์ขนาดอินไลน์ในหน้าเว็บ ดูรายละเอียดเพิ่มเติมได้ที่การสาธิตการค้นหาและหน่วยคอนเทนเนอร์

แนวทางนี้มักเรียกว่าการจัดรูปแบบตัวอักษรแบบยืดหยุ่น เนื่องจากfont-sizeมีการเปลี่ยนแปลงอย่างต่อเนื่องในช่วงความกว้างของวิวพอร์ต แทนที่จะเปลี่ยนจากค่าหนึ่งไปยังอีกค่าหนึ่งที่จุดพักของสื่อหรือคอนเทนเนอร์ อย่างไรก็ตาม อย่าหลงไปกับความราบรื่นของการเปลี่ยนภาพ เพราะโดยทั่วไปแล้วความแตกต่างดังกล่าวจะมองเห็นได้ในการทดสอบเท่านั้น หากคุณปรับขนาดหน้าต่างอย่างราบรื่น ผู้ใช้แทบจะไม่เห็นผลกระทบดังกล่าว แม้ว่าผู้ใช้อาจเปลี่ยนขนาดของเบราว์เซอร์หรือระดับการซูมเป็นประจำ แต่ผู้ใช้จะต้องทำการปรับเปลี่ยนเหล่านั้นอย่างช้าๆ และราบรื่นเพื่อสังเกตความแตกต่างระหว่างเบรกพอยต์กับหน่วยวิวพอร์ต โดยจะส่งผลต่อการเปลี่ยนเท่านั้น ไม่ส่งผลต่อผลลัพธ์หลังการปรับขนาด

ข้อได้เปรียบหลักของการกำหนดขนาดแบบอักษรแบบไหลคือการไม่จำเป็นต้องคำนวณหรือระบุเบรกพอยต์ด้วยตนเอง ซึ่งจะให้ผลลัพธ์ที่ประมาณค่าไว้ที่ขนาดใดก็ตาม คุณเพียงแค่กำหนดจุดเริ่มต้น (16px) และอัตราการเปลี่ยนแปลง (0.25vw จะเพิ่ม 0.25px ใน font-size ทุกครั้งที่เพิ่ม 100px ในวิวพอร์ต) และอาจกำหนดค่าต่ำสุดและสูงสุด เมื่อ Viewport กว้าง 1000px font-size จะเป็น 16px + 2.5px หรือ 18.5px แต่การคำนวณนั้นเบราว์เซอร์จะเป็นผู้จัดการทั้งหมด นี่คือแนวทางที่ใช้ในเดโม โดยใช้cqiหน่วยเพื่อแสดงการตอบสนองตามคอนเทนเนอร์ เมื่อใช้กับองค์ประกอบรูท (html) ในกรณีที่ไม่มีคอนเทนเนอร์ที่กำหนด cqi หน่วยจะยังคงอ้างอิงถึงขนาดวิวพอร์ต

หากต้องการคิดในแง่ของ font-size ที่ระบุในขนาด Viewport ที่กำหนด ให้ลองใช้แนวทาง Media Query ที่ตรงกว่า ซึ่งจะชัดเจนกว่าเล็กน้อย การคำนวณหน่วยวิวพอร์ตตามเบรกพอยต์ที่ต้องการจะซับซ้อนขึ้น หลายคนทำเช่นนี้ด้วยการคัดลอกและวางค่าจากเครื่องมือของบุคคลที่สาม แต่โค้ดที่ได้จะเข้าใจหรือเปลี่ยนแปลงโดยตรงได้ยากกว่ามาก โดยทั่วไปแล้ว ตัวเลือกที่ดีที่สุดสำหรับ CSS คือตัวเลือกที่แสดงความตั้งใจของคุณได้ชัดเจนที่สุด

คำเตือน: การเปลี่ยนแปลงวิวพอร์ตไม่ได้หมายถึงสิ่งเดียวกันเสมอไป

แม้ว่าการใช้ Media Queries และหน่วย vi จะแตกต่างกัน แต่ทั้ง 2 วิธีก็อิงตามการวัดวิวพอร์ตเดียวกัน หากวิวพอร์ตมีความกว้าง 600px 100vw จะเท่ากับ 600px และจะใช้รูปแบบภายใน Media Query (width > 500px)

แต่การที่วิวพอร์ต600pxกว้างหมายความว่าอย่างไร ในความเป็นจริงแล้ว พิกเซลไม่ได้มีขนาดคงที่ขนาดเดียวที่มีความหมายเดียวในทุกสถานการณ์ แม้ว่าการมี Viewport ที่มีพิกเซลน้อยกว่าในหน้าจอขนาดเล็ก (เช่น โทรศัพท์) หรือในหน้าต่างเบราว์เซอร์แคบๆ จะเป็นเรื่องปกติ แต่ก็ไม่ควรยึดถือสมมติฐานนี้ ในความเป็นจริงแล้ว การซูมเข้าและการลดขนาดหน้าต่างเบราว์เซอร์จะส่งผลต่อความกว้างของวิวพอร์ตที่วัดได้เหมือนกัน การดำเนินการอย่างหนึ่ง (การซูม) จะเปลี่ยนขนาดของพิกเซล ส่วนอีกอย่างหนึ่ง (การปรับขนาด) จะเปลี่ยนขนาดของเบราว์เซอร์เอง แต่ทั้ง 2 อย่างจะเปลี่ยนจำนวนพิกเซลตามความกว้างของเบราว์เซอร์ สิ่งที่เราได้รับจากการวัดวิวพอร์ตคือความสัมพันธ์ระหว่างขนาดพิกเซลปัจจุบันกับหน้าต่างเบราว์เซอร์ปัจจุบัน

สำหรับผู้ใช้ การซูมและการปรับขนาดมีจุดประสงค์ที่แตกต่างกันมาก ผู้ใช้ที่เปลี่ยนระดับการซูมพยายามทำให้เนื้อหาของหน้าเว็บมีขนาดใหญ่ขึ้นหรือเล็กลง แต่ผู้ใช้ที่ปรับขนาดเบราว์เซอร์เพียงแค่จัดการพื้นที่ในหน้าจอต่างๆ แม้ว่าความตั้งใจของผู้ใช้จะแตกต่างกัน แต่ผลลัพธ์ในการวัดผล CSS จะเหมือนกัน เมื่อหน้าต่างเล็กลงหรือพิกเซลใหญ่ขึ้น จำนวนพิกเซลตามความกว้างของเบราว์เซอร์ก็จะน้อยลง

การแยกส่วนดังกล่าวทำให้การออกแบบตัวอักษรที่ตอบสนองไม่น่าเชื่อถือ หากตั้งค่าข้อความให้ปรับขนาดตามวิวพอร์ตหรือคอนเทนเนอร์เท่านั้น การซูมของผู้ใช้จะไม่มีผล

การเปลี่ยนค่าของหน่วยที่สัมพันธ์กับวิวพอร์ตเป็น 1vw หรือ 100vw จะเปลี่ยนความสัมพันธ์ที่แน่นอนระหว่างขนาดแบบอักษรกับวิวพอร์ต 1vw แบบอักษรจะ1pxเพิ่มขึ้นทุกๆ 100px ของขนาดวิวพอร์ต ในขณะที่100vw แบบอักษรจะมีขนาดเท่ากับวิวพอร์ตพอดี คุณสามารถเปลี่ยนค่าดังกล่าวเพื่อให้ตัวอักษรขยายช้าลงหรือเร็วขึ้นเมื่อเทียบกับเบราว์เซอร์ แต่ค่าที่สัมพันธ์กับวิวพอร์ตจะยังคงที่เมื่อผู้ใช้ซูมเข้าหรือออก ซึ่งจะไม่ตอบสนองต่อการควบคุมของผู้ใช้เลย

ในทำนองเดียวกัน ทั้งบัญชี 1vw และ 100vw ไม่ได้เป็นบัญชีเริ่มต้นของ font-size

การใช้หน่วยที่สัมพันธ์กับวิวพอร์ตหรือคอนเทนเนอร์เพียงอย่างเดียวสำหรับ font-size จะเป็นอันตรายต่อผู้ใช้เสมอ เมื่อ font-size ตอบสนองต่อคอนเทนเนอร์อย่างเต็มที่แล้ว ก็จะไม่สามารถตอบสนองต่อค่าเริ่มต้นหรือการปรับของผู้ใช้ได้ แม้ว่าจะมีเจตนาดีและมีมาตรการป้องกันที่ดีที่สุด แต่ก็ควรหลีกเลี่ยงการfont-sizeควบคุมขั้นสุดท้ายจากผู้ใช้ ซึ่งไม่เพียงแต่จะทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดีเท่านั้น แต่ยังอาจละเมิดคำแนะนำด้านการช่วยเหลือพิเศษที่กฎหมายมักกำหนดไว้ด้วย โดยเฉพาะอย่างยิ่ง ส่วนที่ 1.4.4 ของหลักเกณฑ์การช่วยให้เข้าถึงเนื้อหาบนเว็บกำหนดว่า "ข้อความสามารถปรับขนาดได้โดยไม่ต้องใช้เทคโนโลยีความช่วยเหลือสูงสุด 200 เปอร์เซ็นต์"

วิธีตรวจสอบว่าค่า font-size ตอบสนองต่อการซูม

หากต้องการให้ font-size ที่สัมพันธ์กับวิวพอร์ตตอบสนองต่อการซูม คุณต้องใช้ค่าที่สัมพันธ์กับวิวพอร์ตเป็นการปรับค่าอื่นๆ คุณทำได้ใน CSS โดยใช้ฟังก์ชัน calc() หรือฟังก์ชันทางคณิตศาสตร์อื่นๆ ที่ยอมรับการคำนวณ เช่น min(), max() และ clamp() font-sizeของ calc(16px + 1vw) จะอิงตามทั้งขนาดวิวพอร์ตและขนาดปัจจุบัน (ที่สัมพันธ์กับการซูม) ของพิกเซล แม้ว่าvw หน่วยจะไม่ได้รับผลกระทบจากการซูม แต่ค่าฐานจะได้รับผลกระทบ

ผลลัพธ์คือ font-size ที่ตอบสนองต่อทั้งขนาดวิวพอร์ตและการตั้งค่าการซูมของผู้ใช้ หากผู้ใช้ซูมไปที่ 200% ค่าฐานจะแสดงผลใหญ่ขึ้น 2 เท่า (32px) ในขณะที่ค่าที่ปรับตามอุปกรณ์จะไม่เปลี่ยนแปลง 1000px วิวพอร์ตจะให้ font-size เริ่มต้นที่ 16px + 10px = 26px แต่เมื่อซูม 200% ขนาดแบบอักษรจะเพิ่มขึ้นเป็น 42px ซึ่งมากกว่า 160% เพียงเล็กน้อย แม้ว่าอาจดูเหมือนไม่ใช่ปัญหาที่ร้ายแรง แต่ยิ่ง font-size อิงตามวิวพอร์ตมากเท่าใด การซูมก็จะยิ่งมีประสิทธิภาพน้อยลงเท่านั้น

ในหน้าจอขนาดเล็ก font-size จะมาจากค่าพิกเซลพื้นฐานเป็นหลัก และจะตอบสนองต่อการซูมได้ดี แต่ในหน้าจอขนาดใหญ่ขึ้น การกำหนดขนาด Viewport จะกลายเป็นเศษส่วนที่ใหญ่ขึ้นของขนาดแบบอักษรที่แสดงผล ทำให้การซูมมีประสิทธิภาพน้อยลง ปัญหานี้จะยิ่งอันตรายเมื่อการซูม 500% (สูงสุดในเบราว์เซอร์ส่วนใหญ่) ไม่สามารถเพิ่มขนาดแบบอักษรได้ 200% ตามที่ WCAG 1.4.4 กำหนด แต่อาจทำให้เกิดความหงุดหงิดได้แม้จะยังไม่ถึงจุดนั้นก็ตาม

ที่ขอบด้านซ้ายของกราฟ (0 ความกว้างของวิวพอร์ต) 500% การซูมจะมีผลอย่างเต็มที่ อย่างไรก็ตาม ประสิทธิภาพดังกล่าวจะลดลงอย่างรวดเร็วเมื่อขนาดเบราว์เซอร์เพิ่มขึ้น และหน่วยวิวพอร์ต (ที่ซูมไม่ได้) จะกลายเป็นปัจจัยที่สำคัญยิ่งขึ้นใน font-size เมื่อเบราว์เซอร์มีความกว้าง 2040px การซูมสูงสุด 500% จะเพิ่มขนาดแบบอักษรได้เพียง 200% เท่านั้น หลังจากนั้น 200% การซูมแบบอักษรที่มีประสิทธิภาพจะทำไม่ได้อีกต่อไป

การย้ายการคำนวณนี้ไปไว้ในฟังก์ชัน clamp() โดยมีค่าต่ำสุดและสูงสุดจะช่วยให้คุณกำหนดขอบเขตที่รับประกันข้อความที่ซูมได้ Maxwell Barvian กล่าวว่า

หากขนาดแบบอักษรสูงสุดน้อยกว่าหรือเท่ากับ 2.5 เท่าของขนาดแบบอักษรต่ำสุด ข้อความจะผ่าน WCAG SC 1.4.4 เสมอ อย่างน้อยก็ในเบราว์เซอร์สมัยใหม่ทั้งหมด

เนื่องจากคําค้นหา @media และ @container อิงตามการวัดเดียวกันกับหน่วย vw และ cqw ตรรกะเดียวกันจึงใช้ได้เมื่อใช้เบรกพอยต์เพื่อเปลี่ยนขนาดแบบอักษร เมื่อขนาดเพิ่มขึ้นมากเกินไป การซูมจะไม่ได้ผล คุณทดสอบวิธีที่ค่าเหล่านี้โต้ตอบกันได้ในการแสดงภาพต่อไปนี้

วิธีตรวจสอบว่าค่า font-size ตอบสนองต่อค่าเริ่มต้นของผู้ใช้

แต่ calc(16px + 1vw) ยังคงไม่ตอบสนองต่อการตั้งค่าแบบอักษรเริ่มต้นของผู้ใช้ หากต้องการทำเช่นนั้น คุณสามารถตั้งค่าฐาน หรือค่าต่ำสุดและสูงสุด โดยใช้หน่วย em หรือ rem แทน px เมื่อรวมทุกอย่างเข้าด้วยกัน คุณจะได้รับผลลัพธ์ที่คุ้นเคยซึ่งตรงกับเดโมที่ลิงก์ไว้

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

โปรดทราบว่า

• ทั้งค่าต่ำสุดและสูงสุดใช้หน่วย em ซึ่งอิงตามค่ากำหนดของผู้ใช้ (และปรับตามการซูม)
• เราจะvwค่าเพิ่มเติมให้น้อยที่สุดเพื่อไม่ให้การซูมได้รับผลกระทบมากเกินไป
• ขนาดสูงสุด (1.125em) น้อยกว่าขนาดต่ำสุด (1em) 2.5 เท่า ซึ่งทำให้มั่นใจได้ว่าค่า font-size ที่มีประสิทธิภาพของ 200% จะเป็นไปได้เสมอ

ขนาดตัวอักษรด้วย pow()

การออกแบบส่วนใหญ่ใช้ขนาดแบบอักษรมากกว่า 1 ขนาด สเกลการพิมพ์อธิบายความสัมพันธ์ระหว่างขนาดแบบอักษรหลายขนาด ซึ่งแสดงเป็นขนาดฐานและชุดตัวคูณเพื่อคำนวณขนาดอื่นๆ ได้ CSS มีสเกลการพิมพ์ในตัวที่สัมพันธ์กับคีย์เวิร์ด medium ซึ่งอ้างอิงถึงค่ากำหนดขนาดแบบอักษรของผู้ใช้ หรือค่าเริ่มต้นของ 16px ระดับคีย์เวิร์ดทั้งหมดมีดังนี้

• xx-small: 3/5 (0.6)
• x-small: 3/4 (0.75)
• small: 8/9 (0.89)
• medium: 1 (ขนาดฐานที่ใช้คูณขนาดอื่นๆ)
• large: 6/5 (1.2)
• x-large: 3/2 (1.5)
• xx-large: 2/1 (2)
• xxx-large: 3/1 (3)

สเกลนี้สัมพันธ์กับค่าเริ่มต้นของผู้ใช้แทนที่จะเป็นรูท font-size จึงใช้งานได้ไม่ดีนักเมื่อคุณเปลี่ยนรูท font-size ของเว็บไซต์ ผู้เขียนส่วนใหญ่จะสร้างสเกลประเภทที่คล้ายกันขึ้นมาใหม่โดยใช้พร็อพเพอร์ตี้ที่กำหนดเอง บางครั้งก็ใช้ชื่อขนาดเสื้อยืดเดียวกัน และบางครั้งก็ชอบใช้ชุดขั้นตอนที่เพิ่มขึ้นและลดลงตามสเกลทางคณิตศาสตร์ มีเครื่องมือของบุคคลที่สามมากมายที่ใช้สร้างสเกลเหล่านี้ตามอัตราส่วนทั่วไป ซึ่งส่วนใหญ่มาจากสเกลเพลงตะวันตก

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

แต่คุณไม่จำเป็นต้องใช้เครื่องมือภายนอกเพื่อสร้างขนาดของคุณเองใน CSS เนื่องจากฟังก์ชัน pow() ใหม่จะสร้างขนาดให้คุณได้ โดยมี 1rem เป็นขนาดฐานของคุณเอง

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

คุณไม่จำเป็นต้องใช้ขั้นตอนทั้งหมดเพื่อให้สเกลสอดคล้องกัน ในความเป็นจริงแล้ว 12ptสเกลการพิมพ์ทั่วไปใช้เศษส่วนประมาณ 5 รายการต่อขั้นตอน แม้ว่าขนาดใหญ่ที่นี่จะใช้ขั้นทั้งหมดในสเกล แต่ขนาดเล็กจะใช้เศษส่วนเพื่อปรับขนาดในอัตราที่ช้ากว่า

มิกซ์อินและฟังก์ชัน CSS ช่วยให้คุณย่อตรรกะดังกล่าวได้มากยิ่งขึ้น ในขณะที่เครื่องมืออื่นๆ ในตัว เช่น progress() ช่วยให้สร้างสเกลที่ปรับจากค่าหนึ่งไปยังอีกค่าหนึ่งได้อย่างราบรื่นง่ายขึ้น แต่ฟีเจอร์เหล่านั้นอยู่นอกขอบเขตของการสาธิตนี้

ตอบสนองต่อขนาดของคอนเทนเนอร์ในหน้า

คุณสามารถทำให้การคำนวณทั้งหมดนี้ทำงานในการค้นหาคอนเทนเนอร์ได้โดยใช้หน่วย cqi แทน vw หรือ vi แต่การปล่อยให้ font-size ของผู้ใช้ยังคงอยู่ในองค์ประกอบ html ก็ช่วยได้เช่นกัน เพื่อให้คอนเทนเนอร์ทุกประเภทอ้างอิงกลับไปที่ค่ากำหนดของผู้ใช้เป็น 1rem ได้ ในเดโม คุณจะเห็นว่ามีการใช้ขนาดตัวอักษรทั้งหมดกับ body แทนที่จะใช้กับองค์ประกอบ html รูทสำหรับแบบอักษรส่วนกลาง จากนั้นจะรีเซ็ตตามขนาดคอนเทนเนอร์สำหรับทุกองค์ประกอบที่มีแอตทริบิวต์ type-set

ซึ่งมักจะเป็นการแลกเปลี่ยนกับขนาดแบบอักษรที่สัมพันธ์กับคอนเทนเนอร์ คุณจะปรับขนาดแบบอักษรให้แต่ละองค์ประกอบในบริบทมีความลื่นไหลมากขึ้น แต่ต้องแลกมาด้วยความสอดคล้องกันทั้งหน้า ซึ่งจะขึ้นอยู่กับรายละเอียดของกรณีการใช้งานของคุณ และอย่าลืมว่าการใช้ตัวอักษรแบบยืดหยุ่นนั้นเป็นการแลกเปลี่ยนที่ทำให้การควบคุมของผู้ใช้ เช่น การซูม มีประสิทธิภาพน้อยลง

แม้ว่าการจัดรูปแบบตัวอักษรที่ปรับเปลี่ยนตามอุปกรณ์และขนาดตัวอักษรจะเป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักออกแบบ แต่คุณก็ไม่จำเป็นต้องทำให้ซับซ้อนขึ้นหากไม่ต้องการ นอกจากนี้ สเกลประเภทเริ่มต้นและสเกลประเภทที่มีในตัวของผู้ใช้ก็เป็นตัวเลือกที่ยอดเยี่ยมเช่นกัน แต่หากเลือกใช้ตัวอักษรที่ปรับตามพื้นที่ (หรือแบบลื่นไหล) ให้ทดสอบว่าผลลัพธ์ทำงานอย่างไรเมื่อเทียบกับการตั้งค่าเริ่มต้นของผู้ใช้และการตั้งค่าการซูมที่แตกต่างกัน ขอให้สนุกกับการรับชมค่ะ