Penjelasan rinci tentang tata letak adaptasi rem

Jenis ponsel saat ini sangat banyak, tak terkecuali seri iPhone, jenis ponsel Android pun tak terhitung jumlahnya, sehingga tidak mungkin menulis sekumpulan gaya tata letak untuk setiap ponsel yang semakin mengupayakan keunggulan Said, tentunya untuk mencari solusi yang masuk akal. rem digunakan untuk tata letak adaptif.

Efek yang ingin dicapai melalui adaptasi adalah seperti yang ditunjukkan di bawah ini (demonstrasi sederhana)

Kedua div tersebut menempati setengah layar terlepas dari apakah mereka berada di layar besar atau layar kecil.

Meskipun penggunaan persentase sederhana di atas dapat dicapai, persentase tidak dapat mencapai adaptasi font, dan masih sulit untuk mengubah persentase menjadi ukuran yang sesuai. Selanjutnya mari kita bahas tentang protagonis kita rem kali ini (biasanya kita hanya menyesuaikan dengan lebarnya saja)

Pertama-tama, rem adalah unit relatif terhadap ukuran fontSize elemen root, artinya 1rem sama dengan ukuran fontSize html. Selanjutnya, kita hanya perlu mengubah fontSize elemen html untuk mengontrol ukuran rem. Selanjutnya, bagaimana kita beradaptasi dengan layar yang berbeda? Selama kita memastikan bahwa semakin besar lebar layar, semakin besar nilai px yang diwakili oleh 1rem dan semakin besar nilai fontSize HTML dengan lebar layar.

Mari kita bahas beberapa konsep: rasio piksel perangkat , piksel fisik perangkat , piksel independen perangkat (terkadang juga disebut piksel virtual)

Rasio piksel perangkat = piksel fisik perangkat/piksel independen perangkat

Piksel fisik perangkat: Unit terkecil yang ditampilkan pada perangkat

Piksel yang tidak bergantung pada perangkat: Unit yang tidak bergantung pada perangkat yang digunakan untuk mengukur piksel secara logis (dimensi CSS).

Ambil iphone6/7/8 sebagai contoh. Piksel fisik iphone6/7/8 adalah 750, yang merupakan ukuran sebenarnya perangkat, dan px adalah satuan piksel independen perangkat layar, dan ukuran cssnya adalah 375, rasio piksel perangkat sudah disetel saat perangkat keluar dari pabrik. Jadi bagaimana kita mencapai adaptasi?

Ini menggunakan rem paling populer

Pertama, menurut piksel fisik perangkat pada layar yang berbeda, ukuran px yang berbeda harus diatur dengan fontSize elemen html.

1. Penyelidikan media

 html{ukuran font:16px;}@layar media dan (lebar minimum:240px) { html { ukuran font:9px; }}@layar media dan (lebar minimum:320px) {html {ukuran font:12px ;}}@layar media dan (lebar minimum:375 piksel) {html{ukuran font:14.0625px;}}

Gunakan layar @media dan (min-width:XXX) untuk menentukan ukuran perangkat, lalu atur fontSize html

2.js mengatur fontSize html (solusi NetEase)

 fungsi setRem () { biarkan htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()

Kode di atas didasarkan pada iphone6 ​​​​sebagai rancangan desain, dan hasilnya adalah piksel sebenarnya 1rem=100px. Karena rasio piksel perangkat iphone6 ​​​​adalah 2, 1rem adalah 50px di pratinjau browser, yang berarti bahwa hubungan antara 1rem dan lebar perangkat adalah 7,5 kali, ukuran sebenarnya akan berubah jika lebar perangkat berubah 1rem, dan proporsi pada layar tidak akan berubah. (Sebagian besar solusi di pasar adalah jenis ini)

3. Gunakan vw, vh

 html{ukuran font: 10vw}

vw dan vh adalah unit relatif baru yang membagi area visual menjadi 100 bagian lebar dan tinggi, mirip dengan tata letak persentase.

Terlampir di bawah ini adalah tabel kompatibilitas vw dan vh

Setiap rem relatif terhadap fontSize elemen root, jadi semua upaya adalah mengatur fontSize elemen root sebanding dengan lebar perangkat

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.