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

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

พิกเซล

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

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

พวกเขาคืออะไร?

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

ตัวอย่างจะมีลักษณะดังนี้:

.main-header p {
font-size: 14px;
}

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

Ems

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

พวกเขาคืออะไร?

หากคุณเป็นใหญ่ในการพิมพ์แบบคลาสสิก คุณอาจรู้จัก “em” เพราะเป็นหน่วยวัดที่มาจากโลกแห่งการพิมพ์ การใช้หน่วยนี้เป็นหน่วยในการพิมพ์ การวัดนี้จะเท่ากับขนาดจุดที่ระบุในปัจจุบัน ตัวอย่างเช่น หนึ่ง em ในแบบอักษร 16 จุดคือ 16 จุด หน่วยนี้จะเหมือนกันสำหรับแบบอักษรทั้งหมดที่มีขนาดจุดที่กำหนด

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

ทำความเข้าใจems

ในกรณีส่วนใหญ่ เว้นแต่ตั้งค่าเริ่มต้นของเบราว์เซอร์เป็นอย่างอื่น em คือ 16 px เมื่อคุณเห็น 1.5 em นั่นจะทำให้เป็น 24 พิกเซล มันไม่ง่ายอย่างนั้นเสมอไป จะเกิดอะไรขึ้นเมื่อมีการทำรัง? อาจเป็นได้ทั้งสะดวกและสับสน การรู้ว่าสิ่งต่าง ๆ ทำงานอย่างไรเมื่อทำงานกับ ems จะช่วยไขปริศนาได้อย่างแน่นอน ย่อหน้า "ฉันซ้อนอยู่" ด้านล่างมีขนาดเท่าใด

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

มีสาม divs ที่นี่ และย่อหน้าค่อนข้างซ้อนกัน ด้วยการเรียงซ้อนของ DOM คุณอาจต้องทำงานนักสืบบ้าง สมมติว่าเรากำลังทำงานกับ em ขนาด 16px เนื่องจากเป็นเรื่องปกติมากที่สุด

คลาส . .one จะคูณ 1em ด้วย 0.5 ซึ่งก็คือ 0.5 em หรือ 8 px ด้วยคลาส .two สิ่งนี้จะคูณด้วย 0.5 อีกครั้ง ซึ่งก็คือ .25 em หรือ 4px สิ่งต่าง ๆ เริ่มมีขนาดเล็กลง ดังนั้นคลาสของ . .three จะช่วยได้ เราจะหา .25 em และคูณมันด้วย 2 ผลลัพธ์ที่ได้คือ 0.5 em หรือ 8px

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

html {

font-size: 20px;

}

นอกจากพิกเซลแล้ว ขนาดตัวอักษรยังสามารถกำหนดเป็นเปอร์เซ็นต์ได้อีกด้วย ประเด็นก็คือว่า ems สามารถทำงานร่วมกับหน่วยวัดอื่นๆ ได้ คุณจะพบสิ่งนี้อย่างแน่นอน เนื่องจากเป็นเรื่องปกติธรรมดาที่จะตั้งค่าฟอนต์เนื้อหาเป็นเปอร์เซ็นต์เพื่อช่วยตั้งค่าพื้นฐาน สมมติว่าขนาดแบบอักษรเริ่มต้นที่ 62.5% ของขนาดเอ็ม ด้วยขนาด em 16px ขนาดตัวอักษรจะเป็น 10px

body {

font-size:62.5%;

}

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

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

เรมส์

พวกเขาคืออะไร?

Rems เป็นส่วนเสริมล่าสุดของไทม์ไลน์ CSS หน่วยวัดนี้ถูกนำมาใช้กับ CSS3 และแก้ปัญหาบางอย่างเกี่ยวกับพิกเซลและ ems ด้วยชื่อที่คล้ายกับ "ems" คุณอาจสงสัยว่า "r" ย่อมาจากอะไร มาจากคำว่า Root EM

รูทเป็นองค์ประกอบ HTML ขนาดที่ระบุในองค์ประกอบ HTML เป็นพื้นฐานสำหรับการวัดนี้ คุณจะเห็นว่าเราได้ใช้ขนาด em บนองค์ประกอบ HTML; สามารถรวมการวัดทั้งสองแบบเข้าด้วยกันได้

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

เบราว์เซอร์สมัยใหม่รองรับ rems แต่อย่าลืมตรวจสอบกับ BrowserStack ว่าคุณต้องรองรับเบราว์เซอร์รุ่นเก่าอะไรก่อนที่จะยอมรับ rem อย่าปล่อยให้เบราว์เซอร์รุ่นเก่ารั้งคุณไว้ คุณสามารถระบุพิกเซลสำรองสำหรับสิ่งที่ต่ำกว่า IE9 ได้ตลอดเวลา เบราว์เซอร์สมัยใหม่ละเว้นพิกเซลเพราะชอบ rems อาจมีลักษณะดังนี้:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

ทำความเข้าใจ rems

จำคณิตศาสตร์ที่เราต้องทำสำหรับองค์ประกอบที่ซ้อนกันของ ems ได้ไหม นั่นไม่จำเป็นสำหรับ rems ทั้งหมดขึ้นอยู่กับองค์ประกอบรูทนั้น เราไม่จำเป็นต้องกังวลเกี่ยวกับองค์ประกอบหลัก เนื่องจากจะขึ้นอยู่กับรากเสมอ

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

มีสาม divs ที่นี่ และย่อหน้าค่อนข้างซ้อนกันเหมือนที่เราเห็นในตัวอย่าง em อีกครั้ง สมมติว่าเรากำลังทำงานกับขนาด em 16px

คลาส . .one และ .two มีขนาดที่กำหนด แต่มันไม่ได้มีความสำคัญอะไรที่นี่ เพราะการซ้อนไม่ได้รับผลกระทบกับ rems เช่นเดียวกับ ems สิ่งที่สำคัญจริงๆ คือการจัดสไตล์ของ .three ซึ่งก็คือ 2 ems ย่อหน้าจะขึ้นอยู่กับองค์ประกอบ HTML ของ 1em การวัดนี้จะเพิ่มเป็นสองเท่าทำให้เรามี 2 rems หรือ 32 พิกเซล

ต้องการปรับขนาดทุกอย่างให้เท่ากันหรือไม่? เพียงปรับขนาดองค์ประกอบรูท สิ่งนี้ยังมีประโยชน์เมื่อปรับขนาดเริ่มต้นของเบราว์เซอร์ คุณสามารถดูว่า ems อนุญาตได้อย่างไร rems ก็เช่นกัน

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

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