วิธีเลือกหน่วย CSS ที่ดีที่สุดเพื่อสร้างเค้าโครงเว็บไซต์ที่ดีขึ้น

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

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

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

ประเภทของหน่วย CSS

สามารถแยกหน่วย CSS ออกเป็นประเภทต่างๆ ได้ดังนี้

• หน่วยสัมบูรณ์
• หน่วยสัมพัทธ์แบบอักษร
• หน่วยสัมพัทธ์ของวิวพอร์ต

หน่วยสัมบูรณ์

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

หน่วยเหล่านี้คือ:

• px (พิกเซล)
• หน่วยเป็นนิ้ว)
• ซม. (เซนติเมตร)
• มม. (มิลลิเมตร)
• พีซี (พิคาส)
• pt (คะแนน)

พิกเซล

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

องค์ประกอบ box ในตัวอย่างต่อไปนี้มีความสูง 150px และความกว้าง 150px และจะยังคงเหมือนเดิมในทุกขนาดหน้าจอ

[css]
.กล่อง{
ความสูง:150px;
ความกว้าง:150px;
}
[/css]

หน่วยสัมบูรณ์อื่นๆ ทั้งหมด เช่น นิ้ว (นิ้ว) ซม. (เซนติเมตร) และ มม. (มิลลิเมตร) เป็นหน่วยวัดจริงที่มีกรณีการใช้งาน CSS ในชีวิตจริงน้อยมาก

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

• 1 นิ้ว = 96px
• 1 ซม. = 37.8px
• 1 มม. = 3.78 พิกเซล

ในขณะที่ pc (picas) และ pt (จุด) เกี่ยวข้องโดยตรงกับนิ้ว

• 1in = 72pt
• 1 นิ้ว = 6 ชิ้น

ความสัมพันธ์ระหว่างหน่วยสัมบูรณ์ทั้งหมดสามารถแสดงได้ดังนี้:

เรม

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

หน่วยสัมพัทธ์แบบอักษร

มีบางหน่วยที่ขึ้นอยู่กับขนาดฟอนต์หรือตระกูลฟอนต์ของเอกสารหรือองค์ประกอบระดับพาเรนต์ ซึ่งรวมถึงหน่วยเช่น:

• em
• หน่วยความจำ
• อดีต
• ช

เอม

Em เป็นหน่วยความยาวสัมพัทธ์ ขึ้นอยู่กับขนาดตัวอักษรขององค์ประกอบหลักหรือเอกสาร ตามค่าเริ่มต้น 1em จะเท่ากับ 16px หากไม่มีการกำหนด font-size

Em สืบทอดขนาดจากขนาดตัวอักษรของพาเรนต์ ดังนั้น หากองค์ประกอบพาเรนต์มี font-size:18px ดังนั้น 1em จะถูกวัดเป็น 18px สำหรับองค์ประกอบย่อยทั้งหมด

ที่นี่เรามี div .post ที่มี 3 childs, .post-item พร้อมชื่อเรื่องและข้อความบางส่วน

[html]
<div class="โพสต์">
<div class="post-item">
<h2>ชื่อเรื่อง</h2>
Lorem Ipsum เป็นเพียงข้อความจำลองของอุตสาหกรรมการพิมพ์และการเรียงพิมพ์ Lorem Ipsum เป็นข้อความจำลองมาตรฐานของอุตสาหกรรมตั้งแต่ช่วงปี 1500
</div>
<div class="post-item">
<h2>ชื่อเรื่อง</h2>
Lorem Ipsum เป็นเพียงข้อความจำลองของอุตสาหกรรมการพิมพ์และการเรียงพิมพ์ Lorem Ipsum เป็นข้อความจำลองมาตรฐานของอุตสาหกรรมตั้งแต่ช่วงปี 1500
</div>
<div class="post-item">
<h2>ชื่อเรื่อง</h2>
Lorem Ipsum เป็นเพียงข้อความจำลองของอุตสาหกรรมการพิมพ์และการเรียงพิมพ์ Lorem Ipsum เป็นข้อความจำลองมาตรฐานของอุตสาหกรรมตั้งแต่ช่วงปี 1500
</div>
</div>
[/html]

ตอนนี้พาเรนต์ .post มี font-size:20px และองค์ประกอบย่อย .post div มี font-size:1.2em ของตัวเองพร้อม padding:0.75em และ margin:0.75em ดังนั้นช่องว่างภายในและระยะขอบที่คำนวณได้จะเป็น 18px (20px *1.2em*0.75em).

[css]
html{
ขนาดตัวอักษร:20px;
}

.โพสต์{
ขนาดตัวอักษร:20px;
}

.โพสต์ div{
ขนาดตัวอักษร:1.2em;
}

.post-item{
พื้นหลัง:สีชมพู;
ช่องว่างภายใน: 0.75em;
ขอบ:0.75em;
}

.post-item h2{
ขนาดตัวอักษร:1.5em;
ขอบ:0.5em 0;
}

.post-item p{
ขอบ:0;
ขนาดตัวอักษร: 1em;
}
[/css]

อย่างที่คุณเห็น องค์ประกอบลูกกำลังสืบทอดค่าจากพาเรนต์

ข้อดีของการใช้ em คือ หากคุณตัดสินใจเปลี่ยน font-size padding และ margin ของแต่ละองค์ประกอบตามสัดส่วน คุณเพียงแค่เปลี่ยนขนาดฟอนต์ขององค์ประกอบหลัก และองค์ประกอบอื่นๆ ทั้งหมดจะปรับตามนั้น

ซึ่งจะไม่เป็นเช่นนั้นกับหน่วยสัมบูรณ์อย่างเช่น px ซึ่งคุณจะต้องปรับแต่ละองค์ประกอบทีละรายการ

ลักษณะการสืบทอดนี้อาจค่อนข้างยุ่งยากในการจัดการ อย่างไรก็ตาม หากองค์ประกอบที่ซ้อนกันมี font-size ของตัวเองใน em ด้วยเช่นกัน

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

[html]
<div class="post-item">
<div>
<h2>ชื่อเรื่อง</h2>
Lorem Ipsum เป็นเพียงข้อความจำลองของอุตสาหกรรมการพิมพ์และการเรียงพิมพ์ Lorem Ipsum เป็นข้อความจำลองมาตรฐานของอุตสาหกรรมตั้งแต่ช่วงปี 1500
</div>
</div>
[/html]

เนื่องจาก post-item มี div ซ้อนอยู่ ขนาดฐานจะเปลี่ยนจาก 24px เป็น 28.8px (20px*1.2em*1.2em) และ font-size และ margin สำหรับ h2 จะเปลี่ยนเป็น 43.2px (20px*1.2em*1.2em *1.5em) และ 14.4px (20px*1.2em*1.2em*0.5em) ตามลำดับ

เรม

Rem มีประโยชน์จริงๆ ในสถานการณ์ประเภทนี้ เพราะมักจะอ้างอิงถึงขนาดฟอนต์ขององค์ประกอบรูท ไม่ใช่องค์ประกอบหลัก

หากคุณใช้ตัวอย่างก่อนหน้านี้และเปลี่ยนหน่วยจาก em เป็น rem สำหรับ .post div คุณจะเห็นองค์ประกอบย่อยทั้งหมดแก้ไขตัวเอง

[css]
.โพสต์ div{
ขนาดตัวอักษร:1.2rem;
}
[/css]

เมื่อเปลี่ยนหน่วยจาก em เป็น rem แล้ว ฐานจะเปลี่ยนจาก parent div เป็นองค์ประกอบ root ซึ่งมี front-size:20px

ดังนั้น การคำนวณจะเป็น 20px*1.2rem*value และ h2 และ p ทั้งคู่จะมี font-size และ margin ที่สอดคล้องกัน โดยไม่คำนึงถึงพาเรนต์

อดีต

Ex สัมพันธ์กับความสูง x ของฟอนต์ปัจจุบันและแทบไม่ได้ใช้ การวัดความสูง x ไม่สอดคล้องกัน บางครั้งก็มาจากฟอนต์เองและบางครั้งเบราว์เซอร์ก็คำนวณเอง

เช่นเดียวกับ em และ rem ขึ้นอยู่กับฟอนต์ แต่ข้อแตกต่างที่สำคัญคือ ex จะเปลี่ยนเมื่อคุณเปลี่ยน font-family ด้วย ซึ่งไม่ใช่กรณีของอีกสองอัน

[css]
.กล่อง{
ความกว้าง:150ex;
ส่วนสูง:150ex;
}
[/css]

ช

Ch คล้ายกับ ex แต่ไม่ได้ขึ้นอยู่กับความสูง x; แทนความกว้างของอักขระศูนย์ (0) นอกจากนี้ยังเปลี่ยนแปลงด้วย font-family

[css]
.กล่อง{
ความกว้าง:150ch;
ความสูง:150ch;
}
[/css]

หน่วยสัมพัทธ์ของวิวพอร์ต

มีหน่วยไม่กี่หน่วยที่ขึ้นอยู่กับความสูงและขนาดความกว้างของวิวพอร์ต เช่น:

• vh (ความสูงของวิวพอร์ต)
• vw (ความกว้างของวิวพอร์ต)
• vmin (วิวพอร์ตขั้นต่ำ)
• vmax (วิวพอร์ตสูงสุด)

วีเอช

Vh (ความสูงของวิวพอร์ต) วัดเป็น 1vh เท่ากับ 1% ของความสูงของวิวพอร์ต หน่วยนี้มีประโยชน์มากสำหรับการสร้างองค์ประกอบเต็มความสูง Vh ตอบสนองคล้ายกับเปอร์เซ็นต์ แต่ไม่ได้ขึ้นอยู่กับความสูงขององค์ประกอบหลัก

คุณสามารถใช้ vh ได้ทุกที่ แต่กรณีการใช้งานทั่วไปของ vh คือการสร้างองค์ประกอบแบบเต็มความสูง ในตัวอย่างนี้ คลาส full-height จะสร้างคอนเทนเนอร์สีน้ำเงินซึ่งจะมีความสูง 100% ของวิวพอร์ต

[css]
.full-height{
ความสูง:100vh;
พื้นหลัง:สีน้ำเงิน;
}
[/css]

ว

Vw (ความกว้างของวิวพอร์ต) คล้ายกับ vh แต่จะคำนึงถึงความกว้างมากกว่าความสูงของวิวพอร์ต 1vw เท่ากับ 1% ของความกว้างวิวพอร์ต หน่วยเหล่านี้มีประโยชน์มากหากคุณต้องการสร้างวิวพอร์ตที่ตอบสนองตามการพิมพ์

ในตัวอย่างนี้ font-siz ของ h1 คือ 6% ของความกว้างวิวพอร์ต ดังนั้น ถ้าความกว้างของวิวพอร์ตคือ 1000px ขนาดฟอนต์จะเป็น 60px และถ้าวิวพอร์ตคือ 500px ขนาดฟอนต์จะเป็น 30px

[css]
h1{
ขนาดตัวอักษร:6vw;
}
[/css]

วีมิน

Vmin คำนวณจากค่าต่ำสุดของความกว้างหรือความสูงของวิวพอร์ต แล้วแต่ว่าค่าใดจะน้อยกว่า สมมติว่าคุณมีขนาดวิวพอร์ตสูง 1,000px กว้าง 800px 1vmin จะเท่ากับ 8px

วีแม็กซ์

Vmax คำนวณตรงกันข้ามกับ vmin โดยพิจารณาค่าสูงสุดของวิวพอร์ต

เช่นเดียวกับตัวอย่างวิวพอร์ตก่อนหน้าที่มีความสูง 1,000px กว้าง 800px 1vmax จะเท่ากับ 10px

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

ในข้อมูลโค้ดนี้ ฉันได้ตั้งค่าช่องว่างภายในเป็น 3vmax และระยะขอบเป็น 1.5vmin

[css]
.post-item{
พื้นหลังสีชมพู
ช่องว่างภายใน: 3vmax;
ขอบ: 1.5vmin;
}
[/css]

การเติมและระยะขอบจะเปลี่ยนไปตามขนาดวิวพอร์ต

เปอร์เซ็นต์ (%) หน่วย

หน่วยเปอร์เซ็นต์ (%) ไม่ได้อยู่ในหมวดหมู่เฉพาะใด ๆ ที่กล่าวถึงข้างต้น แต่สามารถจัดหมวดหมู่เป็นหน่วยสัมพัทธ์ได้ มันสัมพันธ์กับองค์ประกอบหลัก

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

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

ที่นี่คลาส full-width จะมีความกว้าง 100% ขององค์ประกอบหลัก

[css]
.เต็มความกว้าง{
ความกว้าง: 100%;
}
[/css]

บทสรุป

เราได้ครอบคลุมหน่วย CSS เกือบทั้งหมดที่มีให้ใช้งานแล้ว บางอย่างจะเหมาะสมกว่าอย่างอื่นทั้งนี้ขึ้นอยู่กับเป้าหมายของคุณ ในฐานะนักพัฒนาส่วนหน้า การทราบตัวเลือกของคุณเป็นเรื่องดีเสมอ เพราะคุณไม่มีทางรู้ว่าตัวเลือกใดที่คุณต้องการในโครงการต่อไปของคุณ

แล้วหน่วยไหนที่คุณใช้บ่อยที่สุดเพื่อให้ได้ผลลัพธ์ที่ต้องการ? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!