ดีไซน์เยี่ยมมาก ครั้งนี้อิงจากร่างการออกแบบจริงๆ เพราะตอนนี้ เครื่องจักรใดๆ ก็เป็นเครื่องจักรมาตรฐานตามแบบร่างการออกแบบแล้ว! เพื่อนร่วมชั้นของนักพัฒนา ตอนนี้คุณสามารถอ่านคำอธิบายประกอบแบบร่างการออกแบบได้โดยตรง!
การปรับหน้าจอการปรับหน้าจอควรอ้างอิงถึงความสัมพันธ์ในการปรับตัวระหว่างพื้นที่การปรับเนื้อหาและช่วงเวลาหน้าจอ
การปรับหน้าจอเดียวประกอบด้วย ครอบคลุม หรือการเติม และการปรับหลายหน้าจอมักจะขึ้นอยู่กับความกว้าง
บรรจุและปกยังต้องมีการวางตำแหน่งเพื่อจัดการกับพื้นที่สีขาวและเนื้อหาส่วนเกิน
เนื้อหาที่แตกต่างกันใน H5 เดียวกันมักจะใช้วิธีการปรับเปลี่ยนที่แตกต่างกัน กล่าวคือ การแบ่งชั้น
CSS ที่ต้องการสำหรับปัญหาด้านประสิทธิภาพ เช่น การปรับหน้าจอ หากสามารถนำมาใช้กับ CSS ได้ ก็ควรจะนำไปใช้กับ CSS
การปรับตัวทั้งชั้นเพื่อให้แน่ใจว่าองค์ประกอบของแต่ละเลเยอร์ได้รับการปรับขนาดพร้อมกันโดยไม่มีการบิดเบือน พื้นที่การปรับของแต่ละเลเยอร์ควรเท่ากับขนาดของแบบร่างการออกแบบ
การใช้งานโดยตรงคือการสร้างคอนเทนเนอร์ที่มีขนาดเท่ากับพื้นที่การปรับตัวและปรับทั้งเลเยอร์
อาจมีองค์ประกอบหลายอย่างที่มีวิธีการปรับแบบเดียวกันในคอนเทนเนอร์
ยกตัวอย่างการใช้งาน svg :
<!doctype html><html><body><style>.layer { ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%;</style><!-- เติม - -><svg class=layer viewBox=0 0 1080 1920 รักษาAspectRatio=none> <!-- คอนเทนเนอร์--> <rect x=0 y=0 ความกว้าง=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- มี center--><svg class=layer viewBox=0 0 1080 1920 รักษาAspectRatio=xMidYMid ตรง> <!-- คอนเทนเนอร์--> <rect x=0 y=233 ความกว้าง=1080 height=1407 fill=#1565C0/> <!-- องค์ประกอบ--></svg><!-- มีด้านล่าง--><svg class=layer viewBox=0 0 1080 1920 รักษาAspectRatio=xMidYMax พบกัน> <!- - คอนเทนเนอร์--> <rect x=444 y=1779 กว้าง=191 สูง=39 เติม=#1565C0/> <!-- องค์ประกอบ--></svg></body></html>ผลกระทบที่เกิดขึ้นจริง:
การปรับเลเยอร์ทั้งหมดนั้นง่ายต่อการนำไปใช้ และค่าแบบร่างการออกแบบจะถูกอ่านโดยตรงในระหว่างการพัฒนา ซึ่งสามารถตอบสนองความต้องการของเพจแบบคงที่ส่วนใหญ่
แต่เมื่อมีภาพเคลื่อนไหว h5 จำนวนมาก คุณต้องคำนึงถึงความราบรื่นของภาพเคลื่อนไหวและประสิทธิภาพของเพจด้วย
ใช้องค์ประกอบที่ทดแทนได้ เช่น <img> <object> <svg> เป็นคอนเทนเนอร์ และใช้ภาพพื้นหลังเป็นองค์ประกอบ
มีข้อบกพร่องด้านประสิทธิภาพเมื่อใช้ภาพเคลื่อนไหว CSS:
เพื่อปรับปรุงประสิทธิภาพของการใช้งานเหล่านี้ เราต้องมุ่งเน้นไปที่ภาพเคลื่อนไหวของคอนเทนเนอร์และลดขนาดของคอนเทนเนอร์ เป็นการดีที่สุดที่จะเท่ากับพื้นที่รวมขั้นต่ำขององค์ประกอบทั้งหมดในเลเยอร์เพื่อให้เกิดการปรับตัวที่คล่องตัว
การปรับตัวแบบง่าย สูตรสำหรับกระบวนการได้มา โปรดดูที่มาของสูตรการปรับหน้าจอแบบเลเยอร์ H5
ความกว้างของแบบร่างคือ v และความสูงคือ g พิกัดแนวนอนขององค์ประกอบก่อนการปรับคือ x ความกว้างคือ w คือ x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 กำหนด y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 ความกว้าง w3 = (w/v)*u ความสูง h3 = (h/g)*f เมื่อมี เมื่อปรับวิธีการ ค่ามาตราส่วน s = Math.min(f/g, u/v) พื้นที่ว่างด้านซ้ายแนวนอนจะพิจารณาถึงพื้นที่สีขาวทั้งหมด o = (m*v - x)/w พื้นที่สีขาวแนวตั้งจะพิจารณา พื้นที่สีขาวทั้งหมด p = ( n*g- y)/h เมื่อปรับโหมด cover ค่ามาตราส่วน s = Math.max(f/g, u/v) ส่วนเกินทางแนวนอนจะพิจารณาถึงส่วนเกินทั้งหมด o = (x - m*v)/w แนวตั้ง ส่วนเกินจะคำนึงถึงส่วนเกินทั้งหมด p = (y - n*g)/h เมื่อพื้นที่ปรับตัวอยู่ในแนวตั้งที่ด้านบน m = 0 เมื่ออยู่ตรงกลางในแนวตั้ง m = .5 เมื่ออยู่ในแนวตั้งที่ด้านล่าง m = 1 เมื่ออยู่ในแนวนอนทางด้านซ้าย n = 0 เมื่ออยู่ตรงกลางแนวนอน n = .5 เมื่ออยู่ในแนวนอนทางด้านขวา n = 1 เมื่อเปรียบเทียบกับการปรับหน่วยความจำให้เหมาะสมทั้งเลเยอร์ (w3*h3)/(v1*g1) >= w*h/(v*g)<img> ตัวอย่างการใช้งาน
เมื่อความกว้างสูงสุดคือ w/v และความสูงสูงสุดคือ h/g จะสอดคล้องกับการปรับเปลี่ยน
เมื่อตั้งค่าความกว้างขั้นต่ำเป็น w/v และความสูงขั้นต่ำตั้งค่าเป็น h/g จะสอดคล้องกับการปรับฝาครอบ
เมื่อความกว้างเป็น w/v และความสูงเป็น h/g หมายความว่าการปรับการเติม
ในระหว่างการปรับบรรจุ หากขนาดดั้งเดิมของรูปภาพเล็กกว่าความกว้างสูงสุดและความสูงสูงสุด ให้ใช้การซูม: 10 เพื่อขยายหรือปรับขนาดดั้งเดิมของรูปภาพโดยตรง
ในระหว่างการปรับหน้าปก หากขนาดดั้งเดิมของรูปภาพใหญ่กว่าความกว้างขั้นต่ำและความสูงขั้นต่ำ ให้ใช้การซูม: .1 เพื่อลดหรือแก้ไขขนาดดั้งเดิมของรูปภาพโดยตรง
เนื่องจากเปอร์เซ็นต์ที่ด้านซ้ายบนสัมพันธ์กับความกว้างของหน้าจอ u และความสูง f จึงสอดคล้องกับ m*u และ n*f
เนื่องจากเปอร์เซ็นต์ในการแปลงสัมพันธ์กับความกว้าง w1 และความสูง h1 ขององค์ประกอบที่ดัดแปลง จึงสอดคล้องกับ (m*v + x)/w*w1 และ (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* min-width และ min-height ประกอบด้วยคอนเทนเนอร์เสมือน*/ min-width: 50.37037037037037%; /* w3 = (w/v)*u โดยที่ w = 544, v = 1,080 */ min-height: 7.395833333333333%; /* h3 = (h/g)*f โดยที่ h = 142, g = 1920 */ ซูม: .1; /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; โดยที่ m = .5*/ ด้านบน: 50%; /* n*f โดยที่ n = .5 */ แปลง: แปลX(-48.34558823529412%) /* (x - m*v)/w*w1 โดยที่ x = 277, ม. = .5, v = 1,080, w = 544 */ แปล Y(378.8732394366197%); /* (y - n*g)/h*h1 โดยที่ y = 1498, n = .5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- องค์ประกอบ --></body></html> ตัวอย่างการใช้งานเบื้องหลังcontain ค่า background-size จะสอดคล้องกับการปรับเปลี่ยนbackground-size เป็น cover ดังกล่าวจะสอดคล้องกับการปรับค่าปกbackground-size เป็น 100% 100% จะสอดคล้องกับ `การปรับการเติมbackground-position มี p เหมือนกับ o <!doctype html><html><body><style>div { ตำแหน่ง: สัมบูรณ์; ความกว้าง: 50.37037037037037%; /* w3 = w/v*u โดยที่ w = 544, v = 1,080 */ ความสูง: 7.39583333333333%; * h3 = h/g*f โดยที่ h = 142, g = 1920 */ พื้นหลัง: url(http://ui.qzone.com/544x142) ไม่ซ้ำ; /* ภาพพื้นหลังเป็นองค์ประกอบ*/ ขนาดพื้นหลัง: ซ้าย: 25.64814814814815%; คุณ โดยที่ x = 277, v = 1,080 */ ด้านบน: 78.02083333333333%; /* y3 = y/g*f โดยที่ y = 1498, g = 1920 */ พื้นหลัง-ตำแหน่ง-x: -48.34558823529412%; /* o = (x - m*v)/w โดยที่ m = .5 , โวลต์ = 1,080, x = 277, w = 544*/ พื้นหลังตำแหน่ง-y: 378.8732394366197%; /* p = (y - n*g)/h โดยที่ n = .5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- คอนเทนเนอร์--></body></html><svg> ตัวอย่างการใช้งาน
meetOrSlice ของ preserveAspectRatio meet ตาม จะสอดคล้องกับการปรับเปลี่ยนmeetOrSlice ของ preserveAspectRatio เป็น slice จะสอดคล้องกับการปรับเปลี่ยนปกpreserveAspectRatio เป็น none จะสอดคล้องกับการปรับการเติมmeetOrSlice ของ preserveAspectRatio ที่นี่สัมพันธ์กับคอนเทนเนอร์ ไม่ใช่พื้นที่การ transform ใช้เพื่อวางตำแหน่ง และ meetOrSlice ของ preserveAspectRatio ได้รับการแก้ไขเป็น xMinYMin <!doctype html><html><body><style>svg { ตำแหน่ง: สัมบูรณ์; ความกว้าง: 50.37037037037037%; ความสูง: 7.39583333333333%; w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ บน: 0; ซ้าย: 0; แปลงร่าง: แปลX(99.26470588235294%) /* m*v/w*w3 โดยที่ m = .5, v = 1080, w = 544 */ แปล Y (676.056338028169%); /* n*g/h*h3 โดยที่ n = .5, g = 1920, h = 142 */ ล้น: มองเห็นได้;} รูปภาพ svg { แปลง: แปลX(-48.34558823529412%) /* (x - m*v)/w*w1 โดยที่ x = 277, m = .5, v = 1,080 , w = 544 */ แปล Y(378.8732394366197%); /* (y - n*g)/h*h1 โดยที่ y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 รักษาAspectRatio=xMinYMin พบ> <!-- คอนเทนเนอร์--> <ความกว้างของภาพ=544 สูง=142 xlink:href=http://ui.qzone.com/544x142/> <!-- องค์ประกอบ --></svg></body></html> เครื่องมือช่วยการคำนวณเปอร์เซ็นต์และเขียน CSS ด้วยตนเองเป็นเรื่องยาก คุณสามารถใช้เครื่องมือต่างๆ เช่น sass เพื่อช่วยลดความซับซ้อนได้
ความกว้าง v และความสูง g ของแบบร่างการออกแบบโดยทั่วไปจะเป็นค่าคงที่ระดับหน้า
เพียงอ่าน abscissa x กำหนด y , width w และ height h ของแต่ละองค์ประกอบในแบบร่างการออกแบบ จากนั้นเครื่องมือจะสร้าง css
ตอนนี้แม่ของฉันไม่ต้องกังวลเกี่ยวกับปัญหาการคืนค่าหรือปัญหาการปรับหน้าจออีกต่อไป
การประมวลผลคำ ข้อความได้รับการแก้ไขหรือบรรทัดเดียวไม่ได้รับการแก้ไข แท็ก text svg สามารถรองรับได้
หากข้อความได้รับการแก้ไขหรือบรรทัดเดียวไม่ได้รับการแก้ไข คุณยังสามารถแปลงข้อความเป็นรูปภาพได้
ข้อความหลายบรรทัดไม่ได้รับการแก้ไข คุณสามารถใช้ foreignObject ของ svg เพื่อฝัง div
การเปรียบเทียบแผน
มีโซลูชันการปรับหน้าจอมากมาย คุณควรเลือกวิธีใดเพื่อให้ได้การปรับแบบเต็มเลเยอร์หรือการปรับแบบคล่องตัว ต่อไปนี้คือการเปรียบเทียบ
| วางแผน | ซูม | ตำแหน่ง | ซูมข้อความ | เข้ากันได้ |
|---|---|---|---|---|
| เปอร์เซ็นต์การเติมด้านบน | ทำได้เพียงผ่อนปรนเท่านั้น | |||
| วิวพอร์ต | การสนับสนุนมีความซับซ้อน | |||
| พอดีกับวัตถุ | มือถือ Android 4.4.4+ | |||
| svg อัตราส่วนการรักษา | มือถือ Android 3.0+ | |||
| (สูงสุด/นาที)-(กว้าง/สูง) | ข้อความคงที่ | |||
| ขนาดพื้นหลัง | ข้อความเป็นรูปภาพ |
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network