วิธีการแปลงระหว่าง Android DP และ CSS px?

ฉันเห็นว่านี่อาจเป็นคำถาม noob แต่มันทำให้ฉันสับสนจริงๆ

ฉันกำลังอ่านเอกสารจากการออกแบบวัสดุของ Google พร้อมกับการนำไปใช้งานใน css ข้อมูลจำเพาะจะถูกเขียนใน Android dpในขณะที่รหัส css ใช้pxเป็นหน่วยความยาว

สิ่งที่ทำให้ฉันสับสนคือการใช้งาน css มักใช้ค่าที่แน่นอนจากข้อมูลจำเพาะตัวอย่างเช่นขนมปังควรมี :

ความสูงของสแน็กบาร์แบบบรรทัดเดียว: สูง 48 dp

ความกว้างขั้นต่ำ: 288 dp

มุมโค้งมน 2 dp

CSS ที่เกี่ยวข้อง :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

ในความเข้าใจปัจจุบันของฉัน Android DPโดยทั่วไปจะแสดงที่ขนาดหนึ่งพิกเซลบนหน้าจอ 160dpi ในขณะที่ CSS pxถูกกำหนดเป็นมุมมองภาพ ดังนั้นสิ่งที่pxเกิดขึ้นจะเหมือนกับdpเมื่อเห็นในระยะไกล? ถ้าเป็นเช่นนั้นเป็นรูปแบบทั่วไปที่ใช้pxเหมือนdpใน css หรือว่าฉันเข้าใจผิดรหัส CSS อย่างสมบูรณ์หรือไม่

ฉันไม่รู้อะไรเลยเกี่ยวกับการพัฒนา Android มาก่อนและไม่ใช่นักออกแบบ ขอบคุณสำหรับความช่วยเหลือใด ๆ

ฉันคิดว่าการยอมรับนั้นผิด css px แท้จริงแล้ว Device Independent Pixel (จุ่ม) และเป็นรูปแบบทั่วไปในการใช้ px เป็น dp ใน css

ฉันเชื่อว่าคุณสามารถหาคำตอบสำหรับคำถามของคุณได้ที่นี่:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

ในการแปลง dp เป็น px คุณต้องคำนึงถึงขนาดของการแสดงผลที่คุณระบุ ยิ่ง DPI ยิ่งพิกเซลยิ่งคุณต้องอัดมากขึ้นในพื้นที่เดียวกันเพื่อให้ดูดีและหลีกเลี่ยงการพิกเซล :

ldpi: 1 dp = 0.75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1.5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

เช่น:

สี่เหลี่ยมจัตุรัสขนาด 3x3 ใน CSS หรือ Photoshop ต้องเป็น:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi จะใช้กับอุปกรณ์รุ่นต่อไป)

จากข้างต้นเครื่องคิดเลขของคุณควรมีลักษณะเช่นนี้โดยใช้ตัวคูณ 3x dp สำหรับหน้าจอ XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android จะลดขนาดรูปภาพโดยอัตโนมัติหากพบว่าความละเอียดของอุปกรณ์ที่ใช้ต่ำกว่าดังนั้นคุณจึงปลอดภัยที่จะพัฒนาด้วย XXHDPI ในใจเนื่องจากเป็นที่อยู่ของอุปกรณ์ระดับไฮเอนด์ส่วนใหญ่ในตลาดในปัจจุบัน

นี่คือตัวแปลงที่ใช้งานได้ง่ายสำหรับคุณ: http://androidpixels.net/

W3C พูดว่า :

หน่วย px จึงป้องกันคุณจากการที่ต้องทราบความละเอียดของอุปกรณ์ ไม่ว่าจะเป็นเอาต์พุตที่ 96 dpi, 100 dpi, 220 dpi หรือ 1800 dpi, ความยาวที่แสดงเป็นจำนวนเต็ม px จะดูดีและคล้ายกันมากในทุกอุปกรณ์ (... )

และมันก็บอกว่า:

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

มันยังบอกว่า:

ในความเป็นจริง CSS ต้องการให้ 1px ต้องมีขนาด 1/96 นิ้วในทุกงานพิมพ์ (... )

โดยคำนึงถึงว่าอุปกรณ์หน้าจอเริ่มต้นมีการกำหนดค่าเป็น 96dpi มันเป็นข้อสันนิษฐานที่ดีที่สุดเกี่ยวกับวิธีที่เบราว์เซอร์ตีความพิกเซล CSS:

96 css-px = ~ 1 inch

และเรารู้ว่าใน Android:

160 dp = ~ 1 inch

ดังนั้น:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

และตามที่:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

ฉันคิดว่าถูกต้องจนกว่าฉันจะตรวจสอบขนาดToast ของ Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

ดังนั้นมันจึงเป็นการแปลง 1 ต่อ 1 และจากการที่เราได้เบราว์เซอร์ Android มาใช้:

1 css-px = 1 dp

และ 96 css-px ต่อนิ้วใช้กับอุปกรณ์อื่นเช่นเดสก์ท็อปและแล็ปท็อป

ในการสรุป: css พิกเซลไม่ขึ้นกับอุปกรณ์ dpi และบนอุปกรณ์ Android 1 css-px เท่ากับ 1dp

ไม่มีคำตอบที่ถูกต้องมีจริงสอง:

1. แนะนำโดย Google (เช่นในหลักสูตร Udacity เกี่ยวกับการออกแบบวัสดุ): ใช้การแปลงอย่างง่าย ๆ ซึ่งในหลายกรณีคือ 1: 1 เช่นเดียวกับในไลบรารีโพลิเมอร์ มันไม่เหมาะสำหรับการแสดงเรตินาดังนั้นแทนที่จะใช้ 1: 1 ให้ใช้อัตราส่วนความหนาแน่นที่ระบุไว้ในตารางอุปกรณ์ในคู่มือการออกแบบวัสดุอย่างเป็นทางการ ( ตารางที่มีอัตราส่วนและตัวชี้วัดเฉพาะสำหรับอุปกรณ์ยอดนิยมบางรุ่น ) และให้คำสั่ง @media ที่เหมาะสมสำหรับ เกณฑ์ความละเอียดและสินทรัพย์สมมติ 1DP ที่เป็น 1px ที่เท่าเทียมกันสำหรับการแสดงผล mdpi (160dpi / PPI)

หมายเหตุ: แนวคิดโดยรวม: ที่ด้านล่างของหน้า: การปรับขนาดรูปภาพด้วยรูปภาพเพื่อดูอัตราส่วนภาพสำหรับเกณฑ์ความละเอียดหน้าจอหลายจุด (ภาพจุดพัก)

2. หากคุณต้องการความสอดคล้องอย่างยิ่งในการออกแบบสำหรับอุปกรณ์เฉพาะคุณต้องทำการวิจัยและการคำนวณเพิ่มเติมและสิ่งที่สำคัญกว่าคือมีการสืบค้น @media เพิ่มเติมเพื่อสนับสนุนอุปกรณ์จำนวนมากเท่าที่คุณต้องการและให้ทางเลือก (ด้วย วิธีการที่กล่าวถึงในสถานที่แรก) สำหรับสิ่งที่คุณไม่สนใจมาก

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

ประเด็นก็คือ "ความหนาแน่นของพิกเซล" ตามคู่มืออย่างเป็นทางการของการออกแบบวัสดุ (เลย์เอาต์> หน่วยและการวัด) คือ:

จำนวนพิกเซลที่พอดีกับนิ้ว

ดังนั้นโดยทั่วไปความหนาแน่นของพิกเซลเป็นชื่อใหม่สำหรับค่า PPI หรือตั้งแต่ผู้คนจำนวนมากไม่รู้จักนี้เป็นสิ่งที่แยกจากกัน, ค่า dpi

คำจำกัดความของ 1dp ตามคำแนะนำเดียวกัน:

DP เท่ากับพิกเซลทางหนึ่งบนหน้าจอที่มีความหนาแน่นของ 160 ในการคำนวณ dp:

dp = (ความกว้างเป็นพิกเซล * 160) / ความหนาแน่นของหน้าจอ

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

แกนหลักของการออกแบบวัสดุคือการรักษาขนาดทางกายภาพที่สอดคล้องกันในแพลตฟอร์มที่แตกต่างกันซึ่งเพิ่มปัญหาของความละเอียดเดสก์ท็อป, ppi (/ dpi) และพิกเซล css ซึ่งในกรณีนี้คุณควรติดคำนวณ dp เช่นเดียวกับ Android อุปกรณ์และมันไม่เป็นความจริงที่หน้าจอส่วนใหญ่เป็น 96ppi (มันเป็นข้อสันนิษฐานที่สำคัญสำหรับ CSS) ส่วนใหญ่ของมันมี ppi ที่สูงกว่าเล็กน้อยและถ้าคุณคำนึงถึงไม่เพียง แต่เดสก์ท็อปธรรมดาเท่านั้น หรือแท็บเล็ตหรือ "คอนเวอร์ทิเบิล" เช่น Surface มีความต้องการการแปลง: โดยปกติจะอยู่ในช่วง 100-130ppi ซึ่งกล่าวว่าสิ่งที่ฉันใช้อยู่ในขณะนี้คือ 127ppi:

100% = 160ppi -> ความกว้างทางกายภาพ 1 พิกเซล = 1dp -> สี่เหลี่ยมผืนผ้า 100x100px = 100x100dp

79% = 127ppi -> ความกว้างทางกายภาพ 1 พิกเซล = ca. 0,8dp -> สี่เหลี่ยมผืนผ้า 100x100px = 80x80dp

แม้ว่า dp เป็นหน่วยบริสุทธิ์และใหม่เฉพาะสำหรับ Android คุณควรทำการคำนวณบางอย่างเพื่อปรับรูปแบบ MD ซึ่งมาในรูปแบบ dp หากคุณต้องการทราบเพิ่มเติมว่าองค์ประกอบเฉพาะจะมีขนาดใหญ่เพียงใดในแง่ที่มีประโยชน์มากที่สุดสำหรับจุดประสงค์ของคำถามคือค่าช่วงขนาดสัมผัสในอุดมคติในแนวทางการออกแบบวัสดุสำหรับอุปกรณ์เฉพาะ ** ต่ำกว่าค่า dp ทางกายภาพ ** การเปลี่ยนแปลงค่า dp แต่ทางกายภาพยังคงเหมือนเดิม

ปัญหาที่คุณต้องคำนวณหน่วยมีอธิบายเพิ่มเติมในคู่มือ Android API (การแปลงหน่วย dp เป็นหน่วยพิกเซล) และยังใช้กับองค์ประกอบที่มีสไตล์ด้วย CSS:

ในบางกรณีคุณจะต้องแสดงส่วนข้อมูลเป็น dp แล้วแปลงเป็น> พิกเซล

ลองนึกภาพแอพพลิเคชั่นที่รับรู้การเลื่อนหรือการเหวี่ยงของนิ้วหลังจากผู้ใช้เลื่อนนิ้วอย่างน้อย 16 พิกเซล บนหน้าจอพื้นฐานผู้ใช้จะต้องเลื่อน 16 พิกเซล / 160 dpi ซึ่งเท่ากับ 1 / 10th ของนิ้ว (หรือ 2.5 มม.) ก่อนที่ท่าทางจะได้รับการยอมรับ บนอุปกรณ์ที่มีจอแสดงผลความหนาแน่นสูง (240dpi) ผู้ใช้จะต้องเลื่อน 16 พิกเซล / 240 dpi ซึ่งเท่ากับ 1 / 15th ของนิ้ว (หรือ 1.7 มม.) ระยะทางสั้นกว่ามากและแอปพลิเคชันจะปรากฏขึ้นที่มีความไวต่อผู้ใช้มากขึ้น

การแปลงพอลิเมอร์ที่กล่าวถึงก่อนหน้านี้ 1: 1 อาจเป็นเพราะความหนาแน่นของ 96dpi หรือแม้กระทั่งที่ฉันให้ไว้อยู่ที่ไหนสักแห่งในความหนาแน่นต่ำหรือแม้กระทั่ง (ในกรณีของ 96dpi) กลุ่มต่ำกว่า เมื่อคำนึงถึงว่าค่า dp นั้นไม่ใช่ css ที่ยอมรับก็ง่ายกว่าที่จะสมมติว่าอัตราส่วนความหนาแน่น (0,75- สำหรับต่ำ, 1,0 กลางและอื่น ๆ ) เป็นสิ่งที่ควรใช้สำหรับการทำให้เข้าใจง่ายและหลายขนาด การสนับสนุนหน้าจอซึ่งจะแสดงในตารางอุปกรณ์สำหรับการออกแบบวัสดุที่กล่าวถึงก่อนหน้านี้ แม้จะกล่าวถึงว่าเป็นหนึ่งในวิธีปฏิบัติที่ดีที่สุดในบทที่กล่าวถึงข้างต้นของคู่มือ Android API และนั่นคือสิ่งที่การแปลงโพลิเมอร์ 1: 1 อาจดีเนื่องจากอุปกรณ์จำนวนมากมีอัตราส่วนความหนาแน่นที่ระดับ 1

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

หน่วยความยาวที่แน่นอนได้รับการแก้ไขในความสัมพันธ์กับแต่ละอื่น ๆ และยึดกับวัดทางกายภาพบางอย่าง ส่วนใหญ่จะเป็นประโยชน์เมื่อทราบว่าสภาพแวดล้อมเอาต์พุต หน่วยสัมบูรณ์ประกอบด้วยหน่วยทางกายภาพ ('in', 'cm', 'mm', 'pt', 'pc', 'q') และหน่วยมุมภาพ ('px') :

สำหรับการอ่านที่ความยาวของแขน 1px จึงสอดคล้องกับประมาณ 0.26 มม. (1/96 นิ้ว)

หมายเหตุ: โปรดทราบว่าคำจำกัดความของหน่วยพิกเซลและหน่วยทางกายภาพนี้แตกต่างจาก CSS รุ่นก่อนหน้า โดยเฉพาะอย่างยิ่งในรุ่นก่อนหน้าของ CSS หน่วยพิกเซลและหน่วยทางกายภาพไม่เกี่ยวข้องกับอัตราส่วนคงที่: หน่วยทางกายภาพมักจะเชื่อมโยงกับการวัดทางกายภาพของพวกเขาในขณะที่หน่วยพิกเซลจะแตกต่างกันมากที่สุดตรงกับพิกเซลอ้างอิง (การเปลี่ยนแปลงนี้เกิดขึ้นเนื่องจากเนื้อหาที่มีอยู่มากเกินไปนั้นขึ้นอยู่กับสมมติฐานที่ 96dpi และการทำลายสมมติฐานนั้นทำให้เนื้อหาแตกต่างกัน)

คำจำกัดความใหม่ของ px (คำนึงถึงมิติทางกายภาพ) เติมช่องว่างระหว่างพิกเซล CSS และ dps และช่วยให้เราตรวจสอบให้แน่ใจว่าโดยใช้การคำนวณการวัดอย่างง่าย ๆ ในสภาพแวดล้อมเอาท์พุทที่เรียกว่าซึ่งในกรณีนี้จะสอดคล้องกัน ) เค้าโครง MDยังคงเหมือนเดิมในอุปกรณ์และแพลตฟอร์มที่ต่างกัน ยิ่งกว่านั้นทั้งแนวทาง W3C และ MD ใช้รูปภาพอุปกรณ์ต่ำและความละเอียดสูงเพื่อแสดงแนวคิดหลักของการครอบคลุมพิกเซล / จุด - จำเป็นต้องใช้พิกเซลอุปกรณ์ (จุด) ในการครอบคลุมพื้นที่ 1px คูณ 1px บนอุปกรณ์ที่มีความละเอียดสูงกว่า บนความละเอียดต่ำซึ่งหมายความว่าการใช้ CSS ในการค้นหาจอเรตินานั้นเป็นสิ่งเดียวกับที่คุณต้องให้ (แต่มีขีด จำกัด มากกว่า) สำหรับการออกแบบวัสดุและอุปกรณ์มือถือทั้งหมด

โดยสรุปใช้อัตราส่วนความหนาแน่นของ MD ซึ่งเป็นแนวทางปฏิบัติที่ดีที่สุดที่แนะนำโดย Googleหรือถ้าคุณกำหนดค่าความแม่นยำหรือการออกแบบของคุณต้องสอดคล้องกับขนาดจริง: ใช้การแปลงที่แม่นยำโดยใช้ค่า ppi / dpi เฉพาะหรือทั่วไป อุปกรณ์ (ซึ่งค่อนข้างบ้า) สิ่งที่คุณสามารถทดสอบเครื่องมือออนไลน์ของ Google Resizer ได้อย่างง่ายดายเพราะพวกเขาเคารพเกณฑ์ทั่วไปที่แนะนำใน MD Guide ในสถานที่แรกและกฎการหารสำหรับอัตราส่วนและชื่อประเภทการแสดงผลที่เกี่ยวข้อง (ขนาดใหญ่ปานกลางและอื่น ๆ ) ดำเนินการในมัน

ดังนั้นติดกับอัตราส่วน MD จากตารางโดยจำไว้ว่าขนาดพิกเซลอ้างอิง dp เท่ากับสำหรับความละเอียด mdpi (160)และคุณจะดี