เครื่องมือแปลงหน่วย CSS

หน่วยสองตระกูล

ความยาวทุกค่าใน CSS อยู่ในตระกูลใดตระกูลหนึ่งจากสองตระกูล หน่วยสัมบูรณ์ เช่น px, pt, cm, mm และ in อธิบายขนาดทางกายภาพหรือขนาดของอุปกรณ์ที่ตายตัวซึ่งไม่เปลี่ยนไปตามบริบท ส่วนหน่วยสัมพัทธ์ เช่น em, rem, เปอร์เซ็นต์, vw, vh, ch และ ex อธิบายขนาดในแง่ของสิ่งอื่น ซึ่งมักเป็นขนาดฟอนต์หรือวิวพอร์ต ศิลปะทั้งหมดของ CSS ที่ตอบสนอง (responsive) และเข้าถึงได้นั้นสรุปลงที่การเลือกตระกูลที่ถูกต้องสำหรับแต่ละงาน และตัวแปลงนี้มีอยู่ก็เพื่อแปลงระหว่างสองตระกูลนั้นให้สะอาดหมดจด

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

พิกเซลและค่าฐาน 16px

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

em กับ rem: ความต่างที่เกิดจากการสืบทอด

นี่คือความแตกต่างที่ทำให้นักพัฒนาสะดุดมากที่สุด rem สัมพันธ์กับขนาดฟอนต์รากเสมอ ดังนั้น 1.5rem จึงมีความยาวเท่ากันทุกที่ในเอกสาร คาดเดาได้และเรียบง่าย ส่วน em สัมพันธ์กับขนาดฟอนต์ของอีลิเมนต์ที่มันอยู่ ซึ่งหมายความว่า em ทบกัน หากรายการในลิสต์ตั้งเป็น 1.2em และอีลิเมนต์แม่ก็เป็น 1.2em ด้วย อีลิเมนต์ลูกจะเป็น 1.2 คูณ 1.2 ของอีลิเมนต์ปู่ และการซ้อนกันอาจทำให้ข้อความของคุณขยายเป็นขนาดที่น่าตกใจอย่างเงียบ ๆ

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

หน่วยวิวพอร์ตสำหรับเลย์เอาต์ที่ลื่นไหล

หน่วยวิวพอร์ตวัดเทียบกับขนาดของหน้าต่างเอง 1vw คือหนึ่งเปอร์เซ็นต์ของความกว้างวิวพอร์ต และ 1vh คือหนึ่งเปอร์เซ็นต์ของความสูง ดังนั้น 50vw จึงกว้างเท่ากับครึ่งหนึ่งของหน้าต่างเสมอไม่ว่าจะตั้งค่าฟอนต์อย่างไร มันเป็นกระดูกสันหลังของเลย์เอาต์ที่ลื่นไหลและหัวข้อขนาดใหญ่ที่ควรปรับขนาดตามหน้าจอมากกว่าตามขนาดข้อความ

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

เปอร์เซ็นต์, ch และ ex

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

หน่วยงานพิมพ์แบบสัมบูรณ์: pt, in, cm, mm

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

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

การเข้าถึง: ทำไมฟอนต์แบบ px จึงเป็นปัญหา

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

เวิร์กโฟลว์ที่ใช้งานได้จริงจึงตกผลึกออกมาจากเรื่องนี้ คือ ออกแบบด้วยพิกเซลเพราะมันเข้าใจง่าย แล้วแปลงตัวอักษรและระยะห่างของคุณเป็น rem ก่อนส่งมอบ เพื่อให้เลย์เอาต์เคารพการตั้งค่าของผู้ใช้ นั่นคือการแปลงที่พบบ่อยที่สุดที่เครื่องมือนี้ทำ และที่ค่าฐาน 16px ตามค่าเริ่มต้น เลขคณิตก็เป็นมิตร เพราะ 16px คือ 1rem, 24px คือ 1.5rem และ 8px คือ 0.5rem