Saya baru-baru ini memilah catatan saya dari studi front-end saya sebelumnya dan menemukan bahwa saya tidak begitu memahami aspek adaptasi layar (rem) dari web seluler, saya hanya tahu cara menggunakannya.
Selanjutnya, catat beberapa pemikiran Anda tentang adaptasi layar web seluler (rem).
pengantar remrem mewakili ukuran ukuran font elemen root (<html>). Artinya, jika ukuran font elemen root adalah 14px, maka 1rem = 14px
rem beradaptasi dengan web seluler Efek adaptasiPada layar dengan ukuran berbeda, ukuran elemen yang sama tidak tampak sama, namun proporsi lebar layar yang ditempatinya sama.
kode
// Di tag head file html <script type=text/javascript> (function(){ var html = document.documentElement; // Dapatkan lebar layar (px) var hWidth = html.getBoundingClientRect().width; // Atur ukuran font tag html menjadi hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</skrip> // Dalam less/* tentukan variabel @r: 750/15 */@r:50rem; div { lebar: 100/@r tinggi: 200/@r;} kode javascriptPertama, kita salin 1/15 dari ukuran layar (px) ke atribut font-size pada tag html. Pada titik ini, 1/15 px dari ukuran layar (px) sama dengan ukuran 1rem pada ukuran layar apa pun. Artinya: pada ukuran layar apa pun, selama nilai rem yang sama disetel ke elemen, elemen tersebut akan menempati proporsi lebar layar yang sama di semua ukuran layar, dan proporsinya akan sama, dan akan beradaptasi dengan semua ukuran layar.
lebih sedikit kodeSekarang Anda hanya perlu mengubah satuan px elemen dalam rancangan desain menjadi satuan rem.
Oleh karena itu, saat ini rancangan desain tersebut dapat kita anggap sebagai layar ponsel dengan ukuran tertentu.
Dalam contoh saya, lebar rancangan desain adalah 750px.
Oleh karena itu, 750/15 = 50px, yaitu pada layar ponsel dengan ukuran rancangan desain, 1rem = 50px.
Kemudian, dalam kode yang lebih kecil, kita mendefinisikan variabel @r.
Lebar div diukur 100px, karena pada layar dengan ukuran rancangan desain 1rem = 50px, maka nilai rem div tersebut adalah: 100/50 rem yaitu 100/@r.
Tinggi div diukur 200px, karena pada layar dengan ukuran rancangan desain 1rem = 50px, maka nilai rem div tersebut adalah: 200/50 rem yaitu 200/@r.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.