โซลูชันตอบสนอง h5 ที่ใช้กันมากที่สุดสำหรับเทอร์มินัลมือถือในช่วงไม่กี่ปีที่ผ่านมาคือโซลูชัน rem ซึ่งต้องมีการคำนวณขนาดแบบอักษรขององค์ประกอบรากเพื่อให้เกิดการตอบสนอง
แต่โซลูชันนี้ก็มีข้อเสียเช่นกัน นั่นคือ เมื่อขนาดแบบอักษรไม่ใช่จำนวนเต็ม แบบอักษรบางตัวจะใช้หน่วย rem ซึ่งจะทำให้เกิดปัญหากับขนาดของการแสดงแบบอักษร นี่ยังคงเป็นเรื่องน่าปวดหัวสำหรับการพัฒนาส่วนหน้าสำหรับโครงการ โดยมีความต้องการฟื้นฟูการมองเห็นสูงอยู่อย่างหนึ่ง
การแก้ปัญหาการตอบสนองส่วนหน้านั้นไม่มีอะไรมากไปกว่าความสามารถในการแสดงผลตามปกติบนอุปกรณ์ต่างๆ ในที่นี้ เราจะแนะนำโซลูชันการตอบสนองที่ไม่ต้องใช้วิธี rem ใช้ px โดยตรง สิ่งที่เรากำลังพูดถึงคือแบบร่างการออกแบบที่ใช้ขนาด 750px ในร่างการออกแบบคุณวัดได้กี่ px?
เขียนโดยตรงว่ากี่ px มันไม่เร็วมากและไม่ต้องการการแปลง rem เหรอ?
ที่นี่เราใช้ขนาดของการแปลงเพื่อปรับขนาดหน้าเพื่อให้เกิดการตอบสนอง
รหัสหลัก:
la screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') ให้ page = document.getElementById(page); ให้ _scale = window.outerWidth/750; page.style.setProperty(transformOrigin , 0 0); page.style.setProperty (แปลงขนาด (+ _scale + )); // เข้ากันได้กับ ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, สเกล(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin , 0 0); page.style.setProperty (แปลงขนาด (+ _scale + )); // เข้ากันได้กับ ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, สเกล (+ _scale + )); document.body.style.setProperty('visibility', 'visible ') }, 100); } screenMatch(); window.onresize = screenMatch;ในโค้ดด้านบน โหนดที่มีรหัสของหน้าคือโหนดเริ่มต้นขององค์ประกอบของหน้าทั้งหมดและเป็นองค์ประกอบแรกภายใต้เนื้อหา ที่นี่ body/html จำเป็นต้องตั้งค่า min-height:100%;height:100%;
จริงๆ แล้ว เรายังสามารถใช้หน่วย px ในมินิโปรแกรมได้ แต่จะมีข้อบกพร่องของฟอนต์หยักๆ เมื่อใช้การแปลงในมินิโปรแกรม สุดท้ายนี้ เราเพิ่งเปลี่ยนแอตทริบิวต์การซูม และใช้ -webkit-zoom เพื่อความเข้ากันได้ รหัสหลักไม่แตกต่างจาก h5 มากนัก สิ่งเดียวกันคือขนาดการซูม
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network