สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
เมื่อพูดถึง CSS หรือ Cascading Style Sheets ซึ่งเป็นส่วนสำคัญของการพัฒนาเว็บ หลายคนคงคุ้นเคยกับการใช้หน่วยวัดที่หลากหลายเพื่อการกำหนดขนาดขององค์ประกอบต่างๆ ไม่ว่าจะเป็นตัวอักษร ช่องว่าง หรือแม้แต่ออบเจ็กต์กราฟิก หน่วยที่ใช้บ่อยได้แก่ px, pt, และหน่วยอื่นๆ อีกมากมาย การเลือกใช้หน่วยที่เหมาะสมสำหรับงานแต่ละประเภทถือว่าเป็นหัวใจหนึ่งที่ทำให้นักพัฒนาสามารถควบคุมเลย์เอาต์หรือรูปลักษณ์ของเว็บได้ตรงตามใจต้องการ ดังนั้นวันนี้เราจะมาทำความรู้จักกับหน่วยวัดต่างๆ ใน CSS และหลักการเลือกใช้หน่วยความยาวแต่ละชนิดกัน
Pixels หรือ px เป็นหน่วยที่นิยมใช้ในการวัดและกำหนดขนาดใน CSS มากที่สุด เหตุเพราะมันเป็นหน่วยที่ไม่มีการเปลี่ยนแปลงตามขนาดของหน้าจอหรือการตั้งค่าของผู้ใช้งาน หน่วย Pixel จะตรงตามความต้องการของนักออกแบบที่ต้องการให้เกิดความแน่นอนในขนาดและมิติขององค์ประกอบต่างๆ
ตัวอย่างการใช้ px
div {
width: 100px; /* กำหนดความกว้างให้กับ div */
height: 100px;
background-color: lightblue;
}
Points หรือ pt มักใช้ในบริบทของการพิมพ์ ซึ่งเหมาะกับงานที่ต้องการให้ตรงกับขนาดบนกระดาษ แต่อย่างไรก็ตามในเว็บแล้ว ส่วนใหญ่จะไม่แนะนำให้ใช้หน่วยนี้ในการออกแบบเนื่องจากมันไม่ตอบสนองต่อการแสดงผลบนหน้าจอที่หลากหลายมากนัก
ตัวอย่างการใช้ pt
p {
font-size: 12pt; /* ใช้ pt กำหนดขนาดตัวอักษร */
}
หน่วยที่อยู่ในหมวด Relative Units ได้รับความนิยมมากขึ้นในการออกแบบเว็บ responsive เนื่องจากสามารถเปลี่ยนแปลงได้ตามขนาดของหน้าจอและสิ่งแวดล้อมการใช้งาน หน่วย em ขึ้นอยู่กับขนาดตัวอักษรขององค์ประกอบพาเรนต์ ในขณะที่ rem จะอ้างอิงจากขนาดของ root element ซึ่งมักถูกกำหนดใน <html>
ตัวอย่างการใช้ em, rem
html {
font-size: 16px; /* กำหนดขนาด root */
}
p {
font-size: 1em; /* ขนาดตัวอักษรเท่ากับขนาดของ parent */
}
h1 {
font-size: 2rem; /* ขนาดตัวอักษรเท่ากับ 2 เท่าของ root */
}
Viewport Units เป็นหน่วยที่สะท้อนสัดส่วนขนาดของหน้าจอแสดงผล เหมาะกับการออกแบบ Responsive ด้วยการใช้งาน vw และ vh ที่สามารถกำหนดสัดส่วนได้จากความกว้างและความสูงของหน้าจอ
ตัวอย่างการใช้ vw, vh
div {
width: 50vw; /* ความกว้างเป็นครึ่งหนึ่งของหน้าจอ */
height: 50vh;
background-color: pink;
}
การเลือกใช้หน่วยวัดต่างๆ ใน CSS จำเป็นต้องเข้าใจบริบทการใช้งานและผลลัพธ์ที่ต้องการ ไม่เพียงแค่ aesthetic แต่ยังต้องรวมถึงการใช้งานจริงและประสบการณ์ของผู้ใช้ โดยคุณควรคำนึงถึงการตอบสนองของเว็บไซต์ในอุปกรณ์ที่หลากหลายด้วย
การเรียนรู้การใช้หน่วยวัดที่หลากหลายจะเป็นประโยชน์แก่การพัฒนาและออกแบบเว็บที่ตอบโจทย์และยืดหยุ่น สามารถทำให้เราสร้าง User Experience ที่ดีขึ้นได้ และสำหรับผู้ที่ต้องการพัฒนาความรู้การเขียนโปรแกรม คอร์สเรียนที่ EPT อาจจะเป็นทางเลือกที่น่าสนใจในการพัฒนาฝีมือให้ล้ำหน้าไปอีกขั้น
และสุดท้ายจำไว้ว่าการศึกษาและเลือกใช้เทคนิคให้ถูกต้องคือกุญแจสู่การเป็นนักพัฒนาเว็บไซต์ที่ยอดเยี่ยม!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com