ฉันเพิ่งแยกบันทึกของฉันจากการศึกษาส่วนหน้าก่อนหน้านี้ และพบว่าฉันไม่เข้าใจแง่มุมการปรับหน้าจอ (rem) ของเว็บบนมือถือจริงๆ ฉันแค่รู้วิธีใช้งาน
จากนั้น บันทึกความคิดของคุณเกี่ยวกับการปรับหน้าจอเว็บบนมือถือ (rem)
การแนะนำ remrem แสดงถึงขนาดของขนาดตัวอักษรขององค์ประกอบราก (<html>) นั่นคือหากขนาดตัวอักษรขององค์ประกอบรูทคือ 14px ดังนั้น 1rem = 14px
rem ปรับให้เข้ากับเว็บบนมือถือ ผลการปรับตัวบนหน้าจอที่มีขนาดต่างกัน ขนาดขององค์ประกอบเดียวกันดูเหมือนจะไม่เท่ากัน แต่สัดส่วนของความกว้างของหน้าจอที่องค์ประกอบนั้นครอบครองจะเท่ากัน
รหัส
// ในแท็กส่วนหัวของไฟล์ html <script type=text/javascript> (function(){ var html = document.documentElement; // รับความกว้างของหน้าจอ (px) var hWidth = html.getBoundingClientRect().width; // กำหนดขนาดตัวอักษรของแท็ก html เป็น hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</สคริปต์> // น้อยกว่า/* กำหนดตัวแปร @r: 750/15 */@r:50rem; { width: 100/@r; height: 200/@r;} รหัสจาวาสคริปต์ขั้นแรก เราคัดลอก 1/15 ของขนาดหน้าจอ (px) ไปยังแอตทริบิวต์ขนาดตัวอักษรของแท็ก html ณ จุดนี้ 1/15 พิกเซลของขนาดหน้าจอ (px) เท่ากับขนาด 1rem บนหน้าจอทุกขนาด นั่นคือ: ในขนาดหน้าจอใดๆ ตราบใดที่ตั้งค่า rem เดียวกันให้กับองค์ประกอบ องค์ประกอบนั้นจะใช้สัดส่วนความกว้างของหน้าจอเท่ากันในทุกขนาดหน้าจอ และสัดส่วนจะเท่ากัน และจะปรับให้เข้ากับ ทุกขนาดหน้าจอ
รหัสน้อยลงตอนนี้คุณเพียงแค่ต้องแปลงหน่วย px ขององค์ประกอบในแบบร่างการออกแบบให้เป็นหน่วย rem
ดังนั้นในเวลานี้เราจึงถือว่าร่างการออกแบบเป็นหน้าจอมือถือบางขนาดได้
ในตัวอย่างของฉัน ความกว้างของแบบร่างการออกแบบคือ 750px
ดังนั้น 750/15 = 50px นั่นคือในหน้าจอโทรศัพท์มือถือที่มีขนาดของแบบร่าง 1rem = 50px
จากนั้นในโค้ดที่น้อยกว่า เราจะกำหนดตัวแปร @r
ความกว้างของ div วัดได้ที่ 100px เนื่องจากในหน้าจอที่มีขนาดของแบบร่างการออกแบบ 1rem = 50px ดังนั้นค่า rem ของ div คือ: 100/50 rem นั่นคือ 100/@r
ความสูงของ div วัดได้ที่ 200px เนื่องจากในหน้าจอที่มีขนาดของแบบร่างการออกแบบ 1rem = 50px ดังนั้นค่า rem ของ div คือ: 200/50 rem นั่นคือ 200/@r
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network