Font responsif atau responsif adalah impian pengembang web mana pun. Saya meninjau banyak opsi untuk implementasi, duduk di malam hari dan menghasilkan opsi kerja yang andal. Saya ingin membaginya dengan Anda. Bonus SCSS Mixin!Jadi tantangannya. Tunjukkan nilai sesuai dengan tata letak, serta nilai minimum di mana teks atau judul akan terlihat bagus di perangkat seluler, misalnya iPhone 5 (320px). Dalam hal ini, font akan beradaptasi, naik atau turun tergantung pada lebar layar.Kami mengambil nilai awal dari tata letak, misalnya, header H1 dengan ukuran 40px. Kita juga membutuhkan lebar seluruh tata letak kanvas, misalnya 1280px.
Untuk mendapatkan nilai font minimum, kami membuat header sesuai dengan tata letak dan, menggunakan alat pengembang Chrome (F12), pilih ukuran layar minimum yang diinginkan dan pilih ukuran font, ubah nilainya hingga teks terlihat memadai. Saya mendapat 24px
setelah itu di CSS, bukannya ukuran font: 40px; tulis yang berikut ini.font-size: calc(24px + 16 * (100vw / 1280));
Di mana 24px adalah font minimum kami, 16 adalah perbedaan antara font pada tata letak 40 dan font minimum dalam 24 (40-24 = 16). 100vw adalah lebar saat ini penuh dari viewport (layar); 1280 adalah lebar tata letak.Kami menguji dan mendapatkan font responsif yang sepenuhnya sesuai dengan ukuran tata letak.Tetapi, pada ukuran 320px, kita tidak akan melihat hasil yang diinginkan, yaitu font 24px. Ini disebabkan oleh fakta bahwa kami tidak menentukan ukuran layar minimum persis 320px.
Untuk mengatasi situasi ini, kami menulis permintaan media untuk 767px, dan di dalamnya kami mengubah rumus:@media (min-width: 767px){
h1 {
font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
}
}
Di sini kita kurangi 320px dari lebar penuh viewport, serta menambahkan angka tambahan 16 kita tambahkan 70% (16 + 16 * 0,7) .Kamimemeriksa dan melihat kepatuhan penuh dengan tugas! Pada saat yang sama, transisi ke titik break dilakukan dengan mulus dan tidak terasa!Tentu saja, kita bisa menutup semua ini di mixin SCSS:$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$addMobSize: $addSize + $addSize * 0.7;
@media (max-width: 767px) {
font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
}
@media (min-width: 767px) {
font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
}
}
Dan hubungkan sebagai berikut:h1{
@include adaptiv-font(40, 24);
}
Anda dapat sepenuhnya menyingkirkan kueri media:$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
Saya akan senang membaca di komentar bagaimana solusi ini dapat ditingkatkan. Terimakasih atas perhatiannya!Berdasarkan materi dari video " Adaptive Font. Contoh penerapan font (karet) responsif pada CSS + SCSS mixin " Di saluran YouTube " Freelancer for Life "