ความแตกต่างระหว่างptและpxใน CSS คืออะไร? ฉันควรใช้อันไหนและทำไม

px ≠พิกเซล

คำตอบทั้งหมดเหล่านี้ดูเหมือนจะไม่ถูกต้อง ขัดกับสัญชาตญาณในแบบ CSS ไม่พิกเซลpx อย่างน้อยไม่ได้อยู่ในความรู้สึกทางร่างกายที่เรียบง่าย

อ่านบทความนี้จากW3C , EM, PX, PT, CM, IN … , เกี่ยวกับpxหน่วยที่ "เสกสรร" ประดิษฐ์ขึ้นสำหรับ CSS ความหมายของการpxแตกต่างกันไปตามฮาร์ดแวร์และความละเอียด (บทความนั้นสดอัปเดตล่าสุด 2014-10)

วิธีคิดของฉันเกี่ยวกับมัน: 1 px is the size of a thin line intended by a designer to be barely visible.

หากต้องการอ้างอิงบทความนั้น :

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

เพื่อให้ได้แนวคิดเกี่ยวกับการปรากฏตัวของ px ลองจินตนาการถึงจอภาพคอมพิวเตอร์ CRT จากปี 1990 จุดที่เล็กที่สุดที่สามารถแสดงได้คือประมาณ 1 / 100th ของนิ้ว (0.25 มม.) หรือมากกว่านั้น หน่วย px ได้รับชื่อจากพิกเซลหน้าจอเหล่านั้น

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

บทความนั้นให้คำแนะนำบางอย่างเกี่ยวกับการใช้ptvs pxvs emเพื่อตอบคำถามนี้

ที่นี่คุณจะได้รับคำอธิบายโดยละเอียดเกี่ยวกับความแตกต่าง

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

เรื่องตลกของมัน (จากแหล่งที่มา)

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

ดูบทความที่ยอดเยี่ยมนี้ได้ที่ CSS-Tricks:

• px - em -% - pt - คำหลัก

นำมาจากบทความ:

จุด

หน่วยการวัดสุดท้ายที่เป็นไปได้ที่จะประกาศขนาดตัวอักษรคือค่าของจุด (pt) ค่าจุดใช้สำหรับพิมพ์ CSS เท่านั้น! ประเด็นคือหน่วยการวัดที่ใช้สำหรับการพิมพ์ด้วยหมึกบนกระดาษในชีวิตจริง 72pts = หนึ่งนิ้ว One inch = หนึ่งนิ้วเหมือนจริงในชีวิตบนไม้บรรทัด ไม่ใช่นิ้วบนหน้าจอซึ่งขึ้นอยู่กับความละเอียดทั้งหมด

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

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

px

หากคุณต้องการการควบคุมแบบละเอียดการปรับขนาดแบบอักษรในค่าพิกเซล (px) เป็นตัวเลือกที่ยอดเยี่ยม บนหน้าจอคอมพิวเตอร์มันไม่ได้แม่นยำกว่าพิกเซลเดียว ด้วยการกำหนดขนาดฟอนต์เป็นพิกเซลคุณจะบอกให้เบราว์เซอร์แสดงตัวอักษรตามจำนวนพิกเซลที่สูงอย่างแท้จริง:

Windows, Mac, aliased, anti-aliased, cross-browser ไม่สำคัญว่าตัวอักษรที่ตั้งไว้ที่ 14px จะสูง 14px แต่นั่นไม่ได้บอกว่าจะยังคงมีการเปลี่ยนแปลงบางอย่าง ในการทดสอบอย่างรวดเร็วด้านล่างผลลัพธ์มีความสอดคล้องมากกว่าคำหลักเล็กน้อย แต่ไม่เหมือนกัน:

เนื่องจากลักษณะของค่าพิกเซลจึงไม่ลดลง หากองค์ประกอบหลักมีขนาดพิกเซล 18px และชายน์คือ 16px เด็กจะเป็น 16px อย่างไรก็ตามการตั้งค่าการปรับขนาดแบบอักษรสามารถใช้ร่วมกันได้ ตัวอย่างเช่นหากผู้ปกครองตั้งค่าเป็น 16px และเด็กถูกตั้งค่าเป็นใหญ่เด็กจะออกมาใหญ่กว่าผู้ปกครองแน่นอน การทดสอบอย่างรวดเร็วแสดงให้ฉันเห็นสิ่งนี้:

"ใหญ่กว่า" ชน 16px ของพาเรนต์เป็น 20px เพิ่มขึ้น 25%

พิกเซลได้รับการห่อหุ้มที่ไม่ดีในอดีตสำหรับปัญหาการเข้าถึงและการใช้งาน ใน IE 6 และด้านล่างของตัวอักษรขนาดตั้งอยู่ในพิกเซลไม่สามารถปรับขนาดได้โดยผู้ใช้ นั่นหมายความว่าเรานักออกแบบหนุ่มสาวที่มีสุขภาพดีสามารถตั้งค่าประเภท 12px และอ่านบนหน้าจอได้ดี แต่เมื่อคนในฟันยาวขึ้นเล็กน้อยจะเพิ่มขนาดให้ใหญ่ขึ้นเพื่อให้สามารถอ่านได้พวกเขาไม่สามารถทำได้ นี่เป็นความผิดของ IE 6 ไม่ใช่ของเรา แต่เราจัดการสิ่งที่เรา gots และเราต้องจัดการกับมัน

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

pt คือ 1 / 72th ของนิ้วและเป็นการวัดที่ไร้ประโยชน์สำหรับทุกสิ่งที่แสดงผลบนอุปกรณ์ที่ไม่สามารถคำนวณ DPI ได้อย่างถูกต้อง ทำให้เป็นตัวเลือกที่สมเหตุสมผลสำหรับการพิมพ์และเป็นทางเลือกที่น่ากลัวสำหรับการใช้งานบนหน้าจอ

px คือพิกเซลซึ่งจะแมปกับพิกเซลของหน้าจอในกรณีส่วนใหญ่

CSS ให้หน่วยอื่น ๆ มากมายและสิ่งที่คุณควรเลือกขึ้นอยู่กับสิ่งที่คุณกำหนดขนาด

พิกเซลนั้นยอดเยี่ยมถ้าคุณต้องการปรับขนาดบางอย่างเพื่อให้ตรงกับรูปภาพหรือถ้าคุณต้องการเส้นขอบบาง ๆ

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

Ems นั้นยอดเยี่ยมเมื่อคุณต้องการให้องค์ประกอบมีขนาดตามขนาดตัวอักษร (ดังนั้นย่อหน้าอาจกว้างขึ้นถ้าขนาดตัวอักษรใหญ่กว่า)

... และอื่น ๆ

pt คือการสืบทอด (ตัวย่อ) ของ "จุด" ซึ่งในอดีตถูกใช้ในรูปแบบการพิมพ์ที่ขนาดปกติ "วัด" ใน "จุด" ที่ 1 จุดมีการวัดโดยประมาณ 1/72 ของนิ้วและ 72 จึง แบบอักษรพอยต์จะมีขนาด 1 นิ้ว

px เป็นตัวย่อสำหรับ "pixel" ซึ่งเป็น "dot" แบบง่าย ๆ บนหน้าจอหรือเครื่องพิมพ์ dot matrix หรือเครื่องพิมพ์หรืออุปกรณ์อื่น ๆ ที่แสดงผลในรูปแบบ dot - เมื่อเทียบกับเครื่องพิมพ์ดีดเก่าที่มีขนาดคงที่ ทิ้งรอยประทับของตัวละครโดยการกดบนริบบิ้นจึงออกจากภาพที่มีขนาดคงที่

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

มีกล่อง (กรณี) ที่แตกต่างกันสำหรับแบบอักษรและขนาดการพิมพ์ที่แตกต่างกัน แต่ก็ยังและกรณี "บน" และ "ต่ำ" สำหรับแต่ละคน

อีกคำหนึ่งคือ "pica" ซึ่งเป็นการวัดหนึ่งอักขระในแบบอักษรดังนั้น pica คือ 1/6 ของนิ้วหรือ 12 หน่วยหน่วยจุดของการวัด (12/72)

การพูดอย่างหนักหน่วงวัดบนคอมพิวเตอร์ 4.233 มม. หรือ 0.166in ในขณะที่จุดเก่า (อเมริกัน) คือ 1 / 72.27 ของนิ้วและฝรั่งเศสคือ 4.512 มม. (0.177in) ดังนั้นคำสั่งของฉัน "ประมาณ" เกี่ยวกับการวัด

นอกจากนี้เครื่องพิมพ์ดีดที่ใช้ในสำนักงานมีทั้งแบบ "Elite" และ "Pica" ซึ่งมีขนาด 10 และ 12 ตัวอักษรต่อนิ้วแบบ repectivly

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

โปรดทราบว่าเท้า "พิมพ์" นั้นมาจากเครื่องพิมพ์จริงของผู้เสียชีวิต เท้าพิมพ์มี 72 picas หรือ 864 คะแนน

สำหรับการใช้งาน CSS ฉันชอบใช้ EM มากกว่า px หรือ pt ดังนั้นจึงได้รับประโยชน์จากการปรับขนาดโดยไม่สูญเสียตำแหน่งและขนาดที่สัมพันธ์กัน

แก้ไข: เพื่อความสมบูรณ์คุณสามารถคิดว่า EM (em) เป็นองค์ประกอบของการวัดความสูงของตัวอักษรหนึ่งดังนั้น 1em สำหรับตัวอักษร 12pt จะเป็นความสูงของตัวอักษรนั้นและ 2em จะสูงเป็นสองเท่า โปรดทราบว่าสำหรับแบบอักษร 12px 2em คือ 24 พิกเซล SO 10px โดยทั่วไปแล้วจะเป็น 0.63em ของแบบอักษรมาตรฐานเป็น "เบราว์เซอร์" ส่วนใหญ่ที่มีพื้นฐานมาจาก 16px = 1em เป็นขนาดตัวอักษรมาตรฐาน