Desainnya bagus, kali ini benar-benar berdasarkan rancangan desain, karena sekarang mesin apa pun adalah mesin standar sesuai rancangan desain! Sekelas developer, sekarang bisa langsung baca anotasi draf desainnya saja!
Adaptasi layarAdaptasi layar harus mengacu pada hubungan adaptasi antara area adaptasi konten dan interval layar.
Adaptasi satu layar mencakup isi, sampul, atau isi, dan adaptasi multilayar biasanya berdasarkan lebar.
berisi dan menutupi juga memerlukan posisi untuk menangani ruang kosong dan konten berlebih.
Konten yang berbeda dalam H5 yang sama seringkali menggunakan metode adaptasi yang berbeda, yaitu layering.
CSS pilihanUntuk masalah performa seperti adaptasi layar, jika bisa diimplementasikan dengan css, sebaiknya diimplementasikan dengan css.
Adaptasi seluruh lapisanUntuk memastikan bahwa elemen setiap lapisan diskalakan secara serempak tanpa distorsi, area adaptasi setiap lapisan harus sama dengan ukuran rancangan desain.
Implementasi langsungnya adalah membangun wadah dengan ukuran yang sama dengan area adaptasi dan mengadaptasi seluruh lapisan.
Mungkin terdapat beberapa elemen dengan metode adaptasi yang sama di dalam wadah.
Ambil implementasi svg sebagai contoh:
<!doctype html><html><body><style>.layer { posisi: absolut; atas: 0; kiri: 0; lebar: 100%;</style><!-- isi - -><svg class=layer viewBox=0 0 1080 1920 melestarikanAspectRatio=none> <!-- container--> <persegi x=0 y=0 lebar=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- elemen--></svg><!-- berisi pusat--><svg class=layer viewBox=0 0 1080 1920 preservAspectRatio=xMidYMid bertemu> <!-- container--> <persegi x=0 y=233 lebar=1080 tinggi=1407 isi=#1565C0/> <!-- elemen--></svg><!-- berisi bagian bawah--><svg class=layer viewBox=0 0 1080 1920 melestarikanAspectRatio=xMidYMax bertemu> <!- - Kontainer--> <persegi x=444 y=1779 lebar=191 tinggi=39 isi=#1565C0/> <!-- Elemen--></svg></body></html>Efek sebenarnya:
Adaptasi seluruh lapisan mudah diterapkan, dan nilai rancangan desain langsung dibaca selama pengembangan, yang dapat memenuhi kebutuhan sebagian besar halaman statis.
Namun jika terdapat banyak animasi h5, Anda harus mempertimbangkan kelancaran animasi dan performa halaman.
Gunakan elemen yang dapat diganti seperti <img> <object> <svg> sebagai wadah, dan gunakan gambar latar belakang sebagai elemen.
Ada kelemahan kinerja saat menerapkan animasi CSS:
Untuk meningkatkan kinerja implementasi ini, kita perlu fokus pada animasi container dan mengurangi ukuran container. Yang terbaik adalah sama dengan total luas minimum semua elemen dalam satu lapisan untuk mencapai adaptasi yang efisien.
Adaptasi yang disederhanakan rumusUntuk proses derivasi, lihat Derivasi rumus adaptasi layar berlapis H5.
Lebar rancangan desain adalah v dan tinggi g. Koordinat horizontal elemen sebelum adaptasi adalah x. Koordinat vertikal wadah adalah y adalah x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 ordinat y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 lebar w3 = (w/v)*u tinggi h3 = (h/g)*f bila berisi Saat mengadaptasi metode ini, nilai skala s = Math.min(f/g, u/v) Spasi kiri horizontal menyumbang total spasi o = (m*v - x)/w Spasi vertikal menyumbang total spasi p = ( n*g- y)/h Ketika mode penutup diadaptasi, nilai skala s = Math.max(f/g, u/v) Kelebihan kiri horizontal menyumbang total kelebihan o = (x - m*v)/w Vertikal kelebihan menyumbang kelebihan total p = (y - n*g)/h Jika area adaptasi vertikal di atas, m = 0. Jika area adaptasi vertikal di tengah, m = 0,5. m = 1. Jika letaknya horizontal di sebelah kiri, n = 0. Jika letaknya horizontal di tengah, n = 0,5. Ketika secara horizontal di sebelah kanan, n = 1 dibandingkan dengan optimasi memori adaptasi seluruh lapisan (w3*h3)/(v1*g1) >= w*h/(v*g)<img> contoh implementasi
Ketika max-width adalah w/v dan max-height adalah h/g, ini sesuai dengan adaptasi konten.
Ketika lebar minimum diatur ke w/v dan tinggi minimum diatur ke h/g, ini sesuai dengan adaptasi penutup.
Jika lebarnya w/v dan tingginya h/g, berarti adaptasi pengisian.
Selama adaptasi isi, jika ukuran asli gambar lebih kecil dari max-width dan max-height, gunakan zoom: 10 untuk memperbesar atau langsung mengubah ukuran asli gambar.
Selama adaptasi sampul, jika ukuran asli gambar lebih besar dari lebar minimum dan tinggi minimum, gunakan zoom: .1 untuk memperkecil atau langsung mengubah ukuran asli gambar.
Karena persentase di kiri atas relatif terhadap lebar layar u dan tinggi f, maka persentase tersebut sesuai dengan m*u dan n*f
Karena persentase dalam transformasi relatif terhadap lebar w1 dan tinggi h1 elemen yang diadaptasi, maka persentase tersebut sesuai dengan (m*v + x)/w*w1 dan (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* min-width dan min-height merupakan wadah virtual*/ min-width: 50.37037037037037%; /* w3 = (w/v)*u di mana w = 544, v = 1080 */ tinggi menit: 7.395833333333333%; /* h3 = (h/g)*f dengan h = 142, g = 1920 */ perbesar: /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ posisi: kiri: 50%; di mana m = .5*/ atas: 50%; /* n*f di mana n = .5 */ transformasi: TranslateX(-48.34558823529412%) /* (x - m*v)/w*w1 di mana x = 277, m = 0,5, v = 1080, w = 544 */ TranslateY(378.8732394366197%); /* (y - n*g)/h*h1 dengan y = 1498, n = .5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- Elemen --></body></html> contoh implementasi latar belakangbackground-size contain maka nilai tersebut sesuai dengan adaptasi isi.background-size adalah cover maka ini sesuai dengan adaptasi tutupan.background-size adalah 100% 100% berarti `adaptasi isi.background-position memiliki p yang sama dengan o <!doctype html><html><body><style>div { posisi: absolut; lebar: 50.37037037037037%; * h3 = h/g*f dengan h = 142, g = 1920 */ latar belakang: url(http://ui.qzone.com/544x142) tanpa pengulangan; /* Gambar latar belakang sebagai elemen*/ ukuran latar: sampul kiri: 25.64814814814815%; u dimana x = 277, v = 1080 */ atas: 78.0208333333333%; /* y3 = y/g*f di mana y = 1498, g = 1920 */ posisi latar belakang-x: -48.34558823529412%; , v = 1080, x = 277, w = 544*/ posisi-latar belakang-y: 378.8732394366197%; /* p = (y - n*g)/h dengan n = .5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- Kontainer--></body></html><svg> contoh implementasi
meetOrSlice dari preserveAspectRatio meet hal ini sesuai dengan adaptasi yang terkandung.meetOrSlice dari preserveAspectRatio slice hal ini berhubungan dengan adaptasi sampul.preserveAspectRatio adalah none , maka ini sesuai dengan adaptasi pengisian.meetOrSlice dari preserveAspectRatio di sini bersifat relatif terhadap kontainer, bukan area adaptasi. transform digunakan untuk memposisikannya, dan meetOrSlice dari preserveAspectRatio ditetapkan ke xMinYMin . <!doctype html><html><body><style>svg { posisi: absolut; lebar: 50.37037037037037%; tinggi: 7.39583333333333%; w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ atas: 0; kiri: 0; transformasi: terjemahkanX(99.26470588235294%) /* m*v/w*w3 dengan m = .5, v = 1080, w = 544 */ terjemahkanY (676.056338028169%); /* n*g/h*h3 dengan n = 0,5, g = 1920, h = 142 */ overflow: terlihat;}svg image { transform: TranslateX(-48.34558823529412%) /* (x - m*v)/w*w1 dengan x = 277, m = .5, v = 1080 , w = 544 */ terjemahkanY(378.8732394366197%); /* (y - n*g)/h*h1 dengan y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 melestarikanAspectRatio=xMinYMin bertemu> <!-- Wadah--> <lebar gambar=544 tinggi=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Elemen --></svg></body></html> Alat bantuMenghitung persentase secara manual dan menulis css merupakan hal yang merepotkan. Anda dapat menggunakan alat seperti sass untuk membantu menyederhanakannya.
Lebar v dan tinggi g rancangan desain umumnya merupakan konstanta tingkat halaman.
Baca saja absis x , ordinat y , lebar w dan tinggi h setiap elemen dalam rancangan desain, lalu alat tersebut menghasilkan css.
Sekarang ibu saya tidak perlu lagi mengkhawatirkan masalah restorasi atau masalah adaptasi layar saya.
pengolah kata Teks diperbaiki atau satu baris tidak diperbaiki, tag text svg dapat mengatasinya
Jika teksnya tetap atau satu baris pun tidak diperbaiki, Anda juga dapat mengubah teks menjadi gambar.
Beberapa baris teks tidak diperbaiki. Anda dapat menggunakan foreignObject svg untuk menyematkan div
Perbandingan rencana
Ada banyak solusi adaptasi layar. Metode mana yang harus Anda pilih untuk mencapai adaptasi lapisan penuh atau adaptasi yang disederhanakan?
| rencana | Perbesar | posisi | pembesaran teks | kompatibel |
|---|---|---|---|---|
| persentase padding-top | Hanya bisa bersikap lunak | ✓ | ✗ | ✓ |
| area pandang | ✓ | ✗ | ✓ | Dukungan itu rumit |
| kesesuaian objek | ✓ | ✓ | ✗ | Seluler Android 4.4.4+ |
| svg melestarikan Rasio | ✓ | ✓ | ✓ | Seluler Android 3.0+ |
| (maks/mnt)-(lebar/tinggi) | ✓ | ✓ | teks tetap | ✓ |
| ukuran latar belakang | ✓ | ✓ | Teks ke gambar | ✓ |
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.