หน่วย dp (พิกเซลอิสระหนาแน่น) ที่มี CSS คืออะไร

สำหรับ Android ผู้คนแนะนำให้ใช้การวัดค่า dp (พิกเซลที่เป็นอิสระจากความหนาแน่น) สำหรับองค์ประกอบ UI และมีข้อกำหนดที่มีอยู่เช่นการใช้48dpสำหรับความสูงของปุ่มเป็นต้น

ฉันกำลังทำงานเกี่ยวกับแอปพลิเคชันบนเว็บและได้รับคำวิจารณ์มากมายเกี่ยวกับการออกแบบ UI ว่าไม่เป็นไปตามมาตรฐานการออกแบบของ Android เห็นได้ชัดว่าแอปพลิเคชันของฉันจะดูแตกต่างออกไปเนื่องจากใช้ CSS และ HTML แทนธีม Android Holo แต่ฉันยังคงต้องการให้เป็นไปตามนั้นให้มากที่สุด อย่างไรก็ตาม CSS ไม่อนุญาตให้ทำการวัดความหนาแน่นโดยอิสระ

เมื่อฉันทดสอบแอปพลิเคชันของฉันด้วยความละเอียดและความหนาแน่นของพิกเซลที่แตกต่างกันมันดูไม่ดีนักและบางครั้งมันก็ผิดสัดส่วนดังนั้นจึงไม่สามารถใช้งานได้ CSS ไม่มีหน่วย dp เหมือนกับการพัฒนาเนทีฟของ Android แต่ฉันสงสัยว่าทางเลือกอื่นคืออะไร

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

http://www.w3.org/TR/css3-values/#lengths

หน่วยที่ใกล้เคียงที่สุดที่มีอยู่ใน CSS คือหน่วยเปอร์เซ็นต์วิวพอร์ต

• vw - เท่ากับ 1% ของความกว้างของบล็อกเริ่มต้นที่มี
• vh - เท่ากับ 1% ของความสูงของบล็อกที่มีค่าเริ่มต้น
• vmin - เท่ากับ vw หรือ vh ที่เล็กกว่า
• vmax - เท่ากับ vw หรือ vh ที่ใหญ่กว่า

เบราว์เซอร์มือถือเพียงตัวเดียวที่ต้องระวังที่ไม่รองรับหน่วยเหล่านี้คือ Opera http://caniuse.com/#feat=viewport-units

ฉันไม่เห็นด้วยกับคำตอบที่ยอมรับในปัจจุบัน ในฐานะที่เป็น uber5001 แสดงให้เห็นเป็นpxเป็นหน่วยคงที่และในจิตวิญญาณที่คล้ายกับความพยายามของ dpAndroid

ต่อข้อมูลจำเพาะของวัสดุ :

เมื่อเขียน CSS ให้ใช้ px ทุกที่ที่ระบุ dp หรือ sp ต้องใช้ Dp ในการพัฒนาสำหรับ Android เท่านั้น

นอกจากนี้

เมื่อออกแบบเว็บให้แทนที่ dp ด้วย px (สำหรับพิกเซล)

ใช้rem.

เป็นขนาดตัวอักษรขององค์ประกอบรากและหน่วยฐานที่ดีมากสำหรับขนาดขององค์ประกอบ UI อื่น ๆ

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

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

remหน่วยเป็นจุดเพราะมันพูดว่า "เฮ้นี้เป็นวิธีที่ใหญ่ข้อความปกติที่ควรจะเป็น." การกำหนดขนาดขององค์ประกอบ UI อื่น ๆ เป็นทางเลือกที่สมเหตุสมผล

ใน CSS3 pxมันอาจจะถูกต้องมากขึ้นที่จะบอกว่าเว็บไม่ได้มีของ Android ข้อมูลจำเพาะสำหรับ CSS3pxกล่าวว่า:

พิกเซล; 1px เท่ากับ 1/96 ของ 1in

px อาจเป็นการวัดผลที่คุณต้องการในอนาคต

ใน CSS3 ไม่มีหน่วย CSS ที่ไม่ขึ้นกับอุปกรณ์อย่างแท้จริง ดูข้อมูลจำเพาะของ W3C ในความยาวแน่นอน โดยเฉพาะอย่างยิ่งหน่วยสัมบูรณ์อาจไม่ตรงกับการวัดทางกายภาพ

หากหน่วยกายภาพเป็นจริงตามวัตถุประสงค์คุณสามารถใช้คะแนน จุดใกล้พอที่จะ dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

หากคุณใช้ SCSS คุณสามารถเขียนฟังก์ชันเพื่อส่งคืนใน pts:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

และใช้มัน:

.shadow-2 {
  height: dp(2);
}

แล้วอินเทอร์เฟซที่ใช้หน่วย Rem ล่ะ?

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

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

สิ่งที่เกี่ยวกับการใช้ผสมระหว่าง vw (ความกว้างของหน้าจอสำหรับอุปกรณ์ใด ๆ ) และ em? ขนาดแบบอักษรมีการเปลี่ยนแปลงแบบไดนามิกขึ้นอยู่กับความกว้างของหน้าจออุปกรณ์ของคุณ ใช้ในไฟล์ CSS หลักของคุณกฎถัดไป:

font-size: calc(100vw * 10 / 375);

(ความกว้างสำหรับ iPhone 6/7/8 คือ 375px เปลี่ยนเป็น 320px (iPhone5) และอื่น ๆ )

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

ตัวอย่าง: เป้าหมายของคุณคือ font-size h5: 18px ในทุกหน้าจอ

จากนั้น "em" ที่สมบูรณ์แบบของคุณจะเป็น:

h5 { 
 font-size: 1.79904em;
 }

ไม่มีความสมบูรณ์ใช้ 18/10:

h5 { 
 font-size: 1.8em;
 }

ตาม Google Chrome คุณจะได้รับ 18.0096px;