CSS Units

CSS Units เป็นเนื้อหาที่อธิบายเกี่ยวกับหน่วยต่างๆ ของคุณสมบัติเกี่ยวกับความยาวและขนาด เช่นความสูง ความกว้าง ระยะห่าง และขนาดตัวอักษรเป็นต้น ซึ่งประเภทของความยาว (Lengths) แบ่งออกเป็น 2 ประเภทดังนี้

  1. Absolute Lengths (ความยาวสัมบูรณ์)
  2. Relative Lengths (ความยาวสัมพัทธ์)

 

1.Absolute Lengths

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

หน่วยของความยาวสัมบูรณ์ คำอธิบาย
cm centimeters 
mm millimeters 
in inches (1in = 96px = 2.54cm) 
px * pixels (1px = 1/96th of 1in) 
pt points (1pt = 1/72 of 1in) 
pc picas (1pc = 12 pt)

 

2.Relative Lengths

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

หน่วยของความยาวสัมพัทธ์ คำอธิบาย
em หน่วยความยาวที่สัมพันธ์กับฟอนต์ของ element ปัจจุบันเป็นเท่าตัว (ตัวอย่างเช่น ถ้าหาก 3em หมายถึงมีค่าเป็น 3 เท่าของขนาดฟอนต์ปัจจุบัน)
ex หน่วยความยาวที่สัมพันธ์กับขนาดฟอนต์เป็น ครึ่งหนึ่งของ (1/2) x-height ของฟอนต์ปัจจุบัน (ตัวอย่างเช่น ถ้าฟอนต์ปัจจุบันมีค่าเท่ากับ 20px ดังนั้น 1ex ก็จะมีค่าเท่ากับ 10px นั่นเอง)
ch Relative to width of the “0” (zero)
rem สัมพันธ์กับขนาดของฟอนต์หลัก (root) เป็น 2 เท่า
vw เทียบกับ 1% ของขนาดความกว้างในการแสดงผล
vh เทียบกับ 1% ของขนาดความสูงในการแสดงผล
vmin เทียบกับ 1% ของขนาดความกว้าง และความสูงในการแสดงผลที่เล็กกว่า
vmax เทียบกับ 1% ของขนาดความกว้างและความสูงในการแสดงผลที่ใหญ่กว่า
% หน่วยความสัมพันธ์กับขนาดของ element หลัก

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: