ปัจจุบันมีโทรศัพท์มือถือหลายประเภท ไม่ต้องพูดถึง iPhone ซีรีส์ มีโทรศัพท์ Android มากมายหลายประเภท ดังนั้นจึงเป็นไปไม่ได้ที่จะเขียนชุดรูปแบบสำหรับโทรศัพท์มือถือทุกรุ่น ซึ่งเป็นไปไม่ได้เช่นกัน แต่สำหรับส่วนหน้า ที่มุ่งมั่นสู่ความเป็นเลิศมากขึ้นเรื่อยๆ แน่นอนว่าต้องหาทางแก้ไขที่สมเหตุสมผล rem ใช้สำหรับเลย์เอาต์แบบปรับได้
ผลที่จะได้รับจากการปรับตัวมีดังต่อไปนี้ (สาธิตง่ายๆ)
div ทั้งสองกินพื้นที่ครึ่งหนึ่งของหน้าจอ ไม่ว่าจะอยู่บนหน้าจอขนาดใหญ่หรือหน้าจอขนาดเล็กก็ตาม
แม้ว่าการใช้เปอร์เซ็นต์อย่างง่ายข้างต้นสามารถทำได้ แต่เปอร์เซ็นต์ไม่สามารถปรับแบบอักษรได้ และยังเป็นเรื่องยากที่จะแปลงเปอร์เซ็นต์เป็นขนาดที่สอดคล้องกัน ต่อไปมาพูดถึง เรม ตัวเอกของเราในครั้งนี้กัน (ปกติเราจะปรับให้เข้ากับความกว้างเท่านั้น)
การวิเคราะห์หลักการเรมก่อนอื่น rem เป็นหน่วยสัมพันธ์กับขนาดฟอนต์ขององค์ประกอบรูท กล่าวคือ 1rem เท่ากับขนาดฟอนต์ของ html ต่อไปเราเพียงต้องเปลี่ยนขนาดฟอนต์ขององค์ประกอบ html เพื่อควบคุม ขนาดรีม ต่อไป เราจะปรับให้เข้ากับหน้าจอต่างๆ ได้อย่างไร ตราบใดที่เราแน่ใจว่ายิ่งความกว้างของหน้าจอใหญ่ขึ้น ค่า px ที่แสดงด้วย 1rem ก็จะยิ่งมากขึ้น และค่า FontSize ของ HTML ก็จะยิ่งมากขึ้น กล่าวคือ ขนาดตัวอักษรของ HTML จะต้องเป็นสัดส่วน ไปจนถึงความกว้างของหน้าจอ
มาพูดถึงแนวคิดบางประการกัน: อัตราส่วนพิกเซลของอุปกรณ์ พิกเซลทางกายภาพของอุปกรณ์ พิกเซลที่ไม่ขึ้นกับอุปกรณ์ (บางครั้งเรียกว่าพิกเซลเสมือน)
อัตราส่วนพิกเซลของอุปกรณ์ = พิกเซลทางกายภาพของอุปกรณ์/พิกเซลที่ไม่ขึ้นอยู่กับอุปกรณ์
พิกเซลทางกายภาพของอุปกรณ์: หน่วยที่เล็กที่สุดที่แสดงบนอุปกรณ์
พิกเซลที่ไม่ขึ้นกับอุปกรณ์: หน่วยที่ไม่ขึ้นกับอุปกรณ์ที่ใช้ในการวัดพิกเซลในเชิงตรรกะ (ขนาด CSS)
ยกตัวอย่าง iphone6/7/8 พิกเซลจริงของ iphone6/7/8 คือ 750 ซึ่งเป็นขนาดจริงของอุปกรณ์ และ px เป็นหน่วยพิกเซลอิสระของอุปกรณ์ หน้าจอและขนาด CSS ของมันคือ 375 อัตราส่วนพิกเซลของอุปกรณ์จะถูกตั้งค่าไว้แล้วเมื่ออุปกรณ์ออกจากโรงงาน แล้วเราจะปรับตัวได้อย่างไร?
สิ่งนี้ใช้ rem ยอดนิยมที่สุด
แผนการดำเนินงาน Remขั้นแรก ตามพิกเซลทางกายภาพของอุปกรณ์บนหน้าจอที่แตกต่างกัน ต้องตั้งค่าขนาด px ที่แตกต่างกันด้วย fontSize ขององค์ประกอบ html
1. สอบถามสื่อ
html{font-size:16px;}@media screen และ (min-width:240px) { html { font-size:9px; }}@media screen และ (min-width:320px) {html {font-size:12px ;}}@หน้าจอสื่อ และ (ความกว้างขั้นต่ำ:375px) {html{font-size:14.0625px;}}ใช้หน้าจอ @media และ (min-width:XXX) เพื่อกำหนดขนาดของอุปกรณ์ จากนั้นตั้งค่า FontSize ของ html
2. js ตั้งค่าขนาดตัวอักษรของ html (โซลูชัน NetEase)
ฟังก์ชั่น setRem () { la htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()โค้ดด้านบนอิงจาก iphone6 เป็นแบบร่างการออกแบบ และผลลัพธ์ที่ได้คือพิกเซลจริงของ 1rem=100px เนื่องจากอัตราส่วนพิกเซลของอุปกรณ์ของ iphone6 คือ 2, 1rem คือ 50px ในการแสดงตัวอย่างเบราว์เซอร์ ซึ่งหมายความว่า ความสัมพันธ์ระหว่าง 1rem และความกว้างของอุปกรณ์คือ 7.5 เท่า ขนาดจริงจะเปลี่ยนหากความกว้างของอุปกรณ์เปลี่ยนไป 1rem และสัดส่วนบนหน้าจอจะไม่เปลี่ยนแปลง (โซลูชั่นส่วนใหญ่ในตลาดจะเป็นประเภทนี้)
3. ใช้รถโฟล์คสวาเก้น วีเอช
html{ขนาดตัวอักษร: 10vw}vw และ vh เป็นหน่วยสัมพันธ์ใหม่ที่แบ่งพื้นที่การมองเห็นออกเป็น 100 ส่วนของความกว้างและความสูง คล้ายกับเค้าโครงเปอร์เซ็นต์ โซลูชันนี้ไม่จำเป็นต้องเขียน js แต่ความเข้ากันได้ค่อนข้างแย่
ด้านล่างนี้คือตารางความเข้ากันได้ของ vw และ vh
แต่ละ rem จะสัมพันธ์กับขนาดตัวอักษรขององค์ประกอบรูท ดังนั้นความพยายามทั้งหมดคือการตั้งค่าขนาดตัวอักษรขององค์ประกอบรูทตามสัดส่วนความกว้างของอุปกรณ์
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network