Penjelasan detail penggunaan rem+scss untuk adaptasi di ponsel

rem (ukuran font elemen root) mengacu pada unit ukuran font relatif terhadap elemen root (yaitu elemen html).

Dengan asumsi ukuran font elemen root adalah 10px, ukuran 5rem adalah 5*10=50px, misalnya

 html{ ukuran font: 10px;}p{ lebar: 2rem; /* 2*10 = 20px;*/ margin: 1rem;}

Dulu, kita sering menggunakan halaman ini: atur lebar viewport ke lebar perangkat, lalu pilih lebar minimum perangkat yang kita perlukan agar kompatibel (biasanya 320 piksel). Buat halaman berdasarkan lebar minimum ini. Satuannya menggunakan px dan persentase. Pada perangkat dengan lebar berbeda, ukuran font dan ukuran konten halaman sama. Perbedaannya adalah jarak konten di layar besar lebih besar dibandingkan di layar kecil. Jadi kelemahannya adalah halaman tersebut tidak ditampilkan dengan baik pada perangkat dengan ukuran tertentu.

Jika kita menggunakan rem untuk membuat halaman, kita akan mengatur ukuran font yang berbeda pada elemen root sesuai dengan lebar perangkat yang berbeda. Semakin lebar lebarnya, semakin besar ukuran fontnya. Kemudian gunakan rem untuk mengganti px asli. Dengan cara ini, ukuran font, ukuran konten, pasangan menjadi lebih besar seiring dengan bertambahnya lebar layar.

Pertama, js menetapkan ukuran font default html (ditulis di kepala html)

 <tipe skrip=teks/javascript> var bodyElement = document.documentElement ||. document.body, RC = { w: 750, h: 1206 }, //Lebar dan tinggi draf desain default GC = { w: document.documentElement.clientWidth |.|.jendela.lebar dalam ||. lebar layar, h: dokumen.documentElement.clientHeight || layar.tinggi }; fungsi setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // Defaultnya 16 karena ukuran font default html adalah 16px html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Layar panjang lastHTMLSize = 16; }else if(rightSize < currentSize){ // Layar lebar lastHTMLSize = (RC.h / GC.h * GC w) / RC.w * 16; } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</skrip>

Setel file scss px ke rem

 // Default 16 adalah ukuran font default HTML // Default 750 adalah lebar default rancangan desain // $n adalah jarak yang diukur dari rancangan desain @charset UTF-8; { @return $n / (750/16)+rem;}

Edit fungsi untuk memudahkan panggilan:

 @function getTop($n) { @return ($n - 1206/2) / (750/16)+rem;} @function getLeft($n) { @return ($n - 750/2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Ubah posisi: absolut; kiri: 50%; atas: rem($top); margin: 0 0 0 getLeft($kiri) ;}@ mixin centerlt($left, $top) {//Posisi tengah atas dan bawah, kiri dan kanan: absolut; kiri: 50%; atas: 50%; margin: getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) {//Posisi tengah atas dan bawah, kiri dan kanan: absolut kanan: 50%; atas: 50%; ($kanan) 0 0;}@mixin middlert($kanan, $atas) { //Ubah posisi atas, bawah, tengah, kanan: kanan mutlak: rem($kanan atas: 50%; $atas) 0 0 0;}@mixin centerb($kiri, $bawah) { //Ubah posisi: absolut; kiri: 50%; bawah: rem($margin bawah): 0 0 0 getLeft($kiri); leftTop($left, $top) {//Ubah posisi kiri ke atas: absolut kiri: rem($kiri); atas: rem($top);}@mixin rightTop($kanan; $top) { //Ubah kanan ke posisi: absolut kanan: rem($kanan); atas: rem($top);}@mixin leftBottom($kiri, $bawah) {//Ubah kanan ke posisi: absolut; kiri: rem($kiri); bawah: rem($bawah);}

Panggil fungsi di atas (jarak lebar dan tinggi dapat diukur dalam ps untuk mengukur jarak sebenarnya. Lebar rancangan desain default adalah 750):

 .page1-img1{ lebar: rem(473); tinggi: rem(173); @include centerlt(139, 767);}

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