คำอธิบายโดยละเอียดเกี่ยวกับวิธีการปรับเค้าโครง REM บนมือถือสำหรับหน้ากิจกรรม H5

หลังจากได้รับแบบร่างการออกแบบแล้ว จะคืนเค้าโครงได้อย่างไร?

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

ในด้านอุปกรณ์เคลื่อนที่ บรรลุวัตถุประสงค์ได้ด้วยการปรับขนาดอัตราส่วนขนาดหน้าผ่านวิวพอร์ต

พูดง่ายๆ ก็คือ พิกเซลความกว้างและความสูงทั้งหมดจะเหมือนกับเอาต์พุตต้นฉบับที่เป็นภาพ จากนั้นวิวพอร์ตจะถูกตั้งค่าแบบไดนามิกผ่านอัตราส่วนของความกว้างของหน้าต่อความกว้างของต้นฉบับที่เป็นภาพ การอ้างอิงโค้ดหลักของโครงร่างการปรับขนาด:

 (ฟังก์ชั่น () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; if (window.top !== หน้าต่าง) { กลับ pageScale; } var width = docEl.clientWidth ||. var height = docEl.clientHeight ||. 640; if (ความกว้าง / ความสูง >= 360 / 640) { // ลำดับความสำคัญของความสูง = ความสูง / 640; เนื้อหา = 'ความกว้าง =' + 360 + ', ขนาดเริ่มต้น =' + ขนาดหน้า + ', maximum-scale=' + pageScale + ', user-scalable=no'; document.getElementById('viewport').setAttribute('content', content); window.pageScale; } ถ้า (isMobile) { setScale() ; } อื่น ๆ { docEl.className += ' pc' }})()

โซลูชันนี้ได้รับการฝึกฝนในการออกแบบหน้ากิจกรรม H5 ของเราเมื่อปีที่แล้ว

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

โซลูชันการปรับเค้าโครง rem ได้รับการกล่าวถึงบ่อยครั้ง และมีการใช้กันอย่างแพร่หลายในผลิตภัณฑ์ของบริษัทอินเทอร์เน็ตรายใหญ่

พูดง่ายๆ ก็คือ วิธีการคือ

1. คำนวณและตั้งค่าขนาดตัวอักษรของแท็กรูท HTML แบบไดนามิกตามอัตราส่วนของแบบร่างการออกแบบต่อความกว้างของอุปกรณ์
2. ใน CSS ความกว้าง ความสูง ตำแหน่งสัมพัทธ์ ฯลฯ ขององค์ประกอบแบบร่างการออกแบบจะถูกแปลงเป็นค่าในหน่วย rem ตามสัดส่วนเดียวกัน
3. แบบอักษรในร่างการออกแบบใช้ px เป็นหน่วยและปรับเล็กน้อยผ่านการสืบค้นสื่อ

ลองยกตัวอย่างเพื่อแสดง

ปัญหาแรกคือการคำนวณขนาดตัวอักษรของแท็ก html แบบไดนามิก ขึ้นอยู่กับว่าอัตราส่วน Conversion ตกลงกันอย่างไร โดยใช้ตัวอย่างความกว้างของหน้าสิบส่วนเท่าๆ กัน การอ้างอิงโค้ดหลัก:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // รับความกว้างของหน้าต่างปัจจุบัน var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ) width; // มากกว่า 1080px กด 1080 if (width > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // ข้อผิดพลาดและการประมวลผลความเข้ากันได้ในบางรุ่น varactualSize = win .getComputedStyle && parseFloat(win.getComputedStyle(docEl)[ขนาดตัวอักษร]); ขนาดจริง > 0 && Math.abs (ขนาดจริง - rem) > 1) { var remScaled = rem * rem / realSize; docEl.style.fontSize = remScaled + 'px' } } var timer; { clearTimeout(ตัวจับเวลา); timer = setTimeout(setFontSize, 100); //หน้าต่างอัพเดตจะเปลี่ยนขนาดตัวอักษร WIN.addEventListener('resize', dbcRefresh, false); // คำนวณหนึ่งครั้งเมื่อเพจแสดง WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh () } }, false); setFontSize();})(หน้าต่าง)

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

 ฟังก์ชั่น adjustWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); const height = $win.height(); // พิจารณาแถบนำทางถ้า (ความกว้าง / ความสูง < 360 / 600) { กลับ; } ความกว้าง = Math.ceil(ความสูง * 360 / 640); $(warpId).css({ height, width, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // คำนวณ rem window.setFontSize(width);}

ด้วยวิธีการปรับขนาดนี้ จึงสามารถจัดวางเลย์เอาต์ที่แม่นยำพร้อมการปรับขนาดตามสัดส่วนได้บนอุปกรณ์เกือบทุกชนิด

ปัญหาที่สองคือค่าของขนาดองค์ประกอบ

ตามตัวอย่างความกว้างของแบบร่างการออกแบบเป็น 1080px เราจะแบ่งความกว้างออกเป็น 10 ส่วนเท่า ๆ กันเพื่อให้แปลงได้ง่าย จากนั้น 1rem = 1080/10 = 108px วิธีการแปลงคือ:

 const px2rem = function(px, rem = 108) { ให้ remVal = parseFloat(px) / rem; if (ประเภทของ px === string && px.match(/px$/)) { remVal += 'rem'; ส่งคืน remVal;}

ตัวอย่างเช่น มีรูปภาพในแบบร่างการออกแบบที่มีขนาด 460x210 และตำแหน่งหน้าสัมพันธ์ที่ด้านบน: 321px; ซ้าย: 70; ตามวิธีการแปลงข้างต้น สไตล์ CSS สุดท้ายขององค์ประกอบควรเป็น:

 .img_demo { ตำแหน่ง: สัมบูรณ์; พื้นหลังขนาด: ปก; พื้นหลังภาพ: url('demo.png'); ด้านบน: 2.97222rem; ความกว้าง: 4.25926rem;

ด้วยวิธีการข้างต้น ทำให้โครงร่าง rem เป็นจริง แต่การคำนวณค่า rem ด้วยตนเองนั้นไม่สมจริงอย่างเห็นได้ชัด

ด้วยเครื่องมือการประมวลผลล่วงหน้า less/sass เราเพียงต้องตั้งค่าวิธีการมิกซ์อิน จากนั้นตั้งค่าตามขนาดที่แท้จริงของแบบร่างการออกแบบ ยกตัวอย่างให้น้อยลง การอ้างอิงมิกซ์อินจะเป็นดังนี้:

 // px to rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, ด้านบน, @rem); .px2rem(@left, ซ้าย, @rem); .px2rem(@width, width, @rem); .px2rem(@height, ความสูง, @rem);}

สำหรับองค์ประกอบตัวอย่างก่อนหน้านี้ สไตล์ CSS สามารถเขียนได้ดังนี้:

 .img_demo { ตำแหน่ง: สัมบูรณ์; ขนาดพื้นหลัง: ปก; ภาพพื้นหลัง: url('demo.png'); .px2remTLWH(321, 70, 460, 210);}

ที่นี่ ความกว้างและความสูงสามารถอ่านได้โดยตรงจากขนาดขององค์ประกอบรูปภาพเอาต์พุตในแบบร่างการออกแบบ สามารถรับค่าด้านบน/ซ้ายได้อย่างรวดเร็วโดยการย้ายเส้นอ้างอิงเพื่อวางตำแหน่งองค์ประกอบใน Photoshop

การปรับขนาดแบบอักษรโดยใช้สัดส่วน rem จะทำให้เกิดปัญหาในการแสดงผล คุณเพียงต้องใช้คำสั่งสื่อเพื่อตั้งค่าหลายขนาด

ตัวอย่างการอ้างอิง:

 // แบบอักษรตอบสนอง หน้าจอ @media และ (ความกว้างสูงสุด: 321px) { body { ขนาดตัวอักษร: 13px; }}@หน้าจอสื่อ และ (ความกว้างขั้นต่ำ: 321px) และ (ความกว้างสูงสุด: 400px) { body { แบบอักษร - ขนาด: 14px; }}@หน้าจอสื่อและ (ความกว้างขั้นต่ำ: 400px) { body { ขนาดตัวอักษร: 16px; }}

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network