Tipografi Bendalir CSS: Panduan Menggunakan clamp() untuk Teks Boleh Skala-tutorial css-php.cn

Tipografi Bendalir CSS: Panduan Menggunakan clamp() untuk Teks Boleh Skala

DDD

Lepaskan： 2024-09-18 18:35:16

asal

236 orang telah melayarinya

Jadual kandungan

Pengenalan
Menggunakan fungsi clamp() untuk Mencapai Tipografi Bendalir
Kesimpulan

pengenalan

Menulis pertanyaan media CSS kadangkala ~~mencabar~~ menyeronokkan, terutamanya apabila terdapat terlalu banyak perkara yang perlu dilakukan. Kami sering memberi tumpuan kepada membina reka letak dan menjadikan bahagian lain tapak web kami responsif sehingga ia menjadi tekanan. Tetapi bagaimana jika kita boleh mengurangkan tekanan itu dengan menjadikan teks kita boleh berskala, tidak kira saiz skrin, tanpa perlu menulis satu tan pertanyaan media?

Mari kita selami dan mulakan cara untuk mencapai tipografi cecair menggunakan fungsi CSS clamp().

Menggunakan Fungsi Clamp() untuk Mencapai Tipografi Bendalir

Masalahnya

Berikut ialah halaman web asas dengan teg H1 dan teg P:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fluid Typography</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
            background: #333;
            color: white;
            text-align: center;
        }

        h1{
            font-size: 5rem;
        }

        p{
            font-size: 3rem;
            color: red;
        }
    </style>
<body>
    <h1>CSS Fluid Typography</h1>
    <p>Why is this text not scalable</p>
</body>
</html>

Salin selepas log masuk

Sekarang mari kita lihat bagaimana teks berkelakuan pada saiz skrin yang berbeza

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Cara mudah untuk menjadikan teks di atas responsif ialah menggunakan pertanyaan media, tetapi dalam artikel ini, kami akan menjadikan teks responsif menggunakan fungsi CSS clamp().

Tetapi sebelum itu, mari kita lihat dahulu unit vw (lebar viewport). Unit vw membolehkan anda menetapkan saiz fon anda berbanding dengan lebar port pandangan, menjadikan teks anda responsif.

Mari kemas kini kod sedia ada kami dengan perubahan berikut:

<style>
  h1 {
    font-size: 10vw; /* H1 size is 10% of the viewport width */
  }
  p {
    font-size: 5vw;  /* p size is 5% of the viewport width */
    color: red;
  }
</style>

Salin selepas log masuk

Jika lebar port pandangan ialah 1000px:
Saiz fon h1 ialah 100px
Saiz fon p ialah 50px
Saiz fon untuk H1 dan p akan terus berkembang atau mengecut apabila lebar port pandangan berubah.

Jom lihat rupanya:
CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Daripada GIF di atas, kita dapat melihat bahawa menggunakan vw berfungsi untuk teks responsif tetapi tidak mempunyai kekangan. Apabila lebar port pandangan meningkat, saiz fon akan terus berkembang tanpa had, dan begitu juga, ia akan terus mengecut apabila lebar port pandangan berkurangan.

Di sinilah fungsi clamp() dimainkan. clamp() membolehkan anda menetapkan saiz fon minimum, pilihan dan maksimum, memberikan kawalan ke atas cara teks berskala dalam julat yang ditentukan.

Penyelesaian

Menggunakan fungsi pengapit()

Fungsi clamp() dalam CSS membolehkan anda menetapkan julat untuk saiz fon anda.
Format umum ialah :

clamp(minimum, preferred, maximum)

Salin selepas log masuk

Minimum: Saiz terkecil teks anda boleh mengecil.
Diutamakan: Saiz ideal, selalunya peratusan lebar port pandangan
Maksimum: Saiz terbesar teks anda boleh berkembang.

Mari kita gunakan contoh dari atas dan ubah suai kod dengan yang berikut

h1{
  font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}

p{
  font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px)
}

Salin selepas log masuk

Mari kita lihat penampilannya pada penyemak imbas:

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Kini, elemen h1 dan p akan responsif, kerana saiznya akan kekal dalam julat yang ditetapkan, memastikan ia tidak menjadi terlalu besar atau terlalu kecil.

Kesimpulan

Dalam artikel ini, kami telah mempelajari cara untuk mencapai tipografi cecair menggunakan fungsi CSS clamp() . Terima kasih kerana membaca sehingga ke tahap ini. Saya meminta anda menggugurkan suka dan berkongsi artikel ini dengan rakan sebaya anda yang akan mendapat manfaat daripada ini.

Apakah pendapat anda tentang artikel ini? Jangan ragu untuk berkongsi pendapat anda di bahagian komen di bawah.

P.S. Saya sedang mencari peluang pembangun bahagian hadapan. Jika anda mempunyai sebarang petunjuk atau sedang mengambil pekerja, sila semak resume saya atau berhubung dengan saya di LinkedIn. Saya ingin mendengar daripada anda!

Atas ialah kandungan terperinci Tipografi Bendalir CSS: Panduan Menggunakan clamp() untuk Teks Boleh Skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!