Petua untuk melaraskan ketinggian baris berdasarkan saiz skrin menggunakan CSS Viewport unit vmin dan vmax-tutorial css-php.cn

Petua untuk melaraskan ketinggian baris berdasarkan saiz skrin menggunakan CSS Viewport unit vmin dan vmax

王林

Lepaskan： 2023-09-13 09:52:44

asal

1042 orang telah melayarinya

使用 CSS Viewport 单位 vmin 和 vmax 来实现根据屏幕尺寸调整行高的技巧

Gunakan unit CSS Viewport vmin dan vmax untuk melaksanakan teknik melaraskan ketinggian garisan mengikut saiz skrin

Kini, kadar penembusan peranti mudah alih semakin tinggi demi meningkatkan pengalaman pengguna, reka bentuk web perlu mempunyai susun atur responsif yang baik. Apabila melakukan reka bentuk responsif, masalah yang sering dihadapi ialah cara melaraskan ketinggian baris mengikut saiz skrin. Nasib baik, unit CSS Viewport vmin dan vmax boleh membantu kami mencapai matlamat ini.

Unit vmin dan vmax masing-masing menentukan satu set unit panjang yang dikira relatif kepada lebar atau tinggi port pandangan. vmin menentukan nilai panjang yang lebih kecil daripada lebar dan ketinggian viewport. vmax menentukan nilai panjang yang merujuk kepada lebar dan ketinggian port pandangan yang lebih besar.

Andaikan kami mempunyai halaman yang mengandungi berbilang baris teks Kami mahu ketinggian baris teks menyesuaikan diri secara automatik apabila lebar atau ketinggian port pandangan berubah. Di bawah ialah langkah pelaksanaan dan contoh kod yang sepadan.

Pertama, kita perlu menetapkan nilai asas Apabila lebar atau tinggi port pandangan ialah 100vmin, ketinggian baris ditetapkan kepada 1vmin. Dengan cara ini, apabila lebar atau ketinggian port pandangan adalah kurang daripada atau sama dengan 100vmin, kami boleh memastikan bahawa ketinggian baris tidak akan melebihi lebar atau ketinggian port pandangan. . .text {

font-size: 1.5rem;

line-height: 1vmin; /
Tetapkan ketinggian baris kepada 1vmin
/
}

Seterusnya, kita boleh memasukkan berbilang baris teks dalam bekas dan tetapkan ketinggian bekas Tetapkan pada ketinggian viewport supaya teks memenuhi bekas sepenuhnya. Pada masa yang sama, kami juga menetapkan saiz fon teks kepada 1.5rem untuk memastikan kebolehbacaan teks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla laoreet mollis nisi, id interdum mi commodo quis Semper magna id vehicula pellentesque.

Nunc ex nibh, feugiat at With. kod di atas, kami telah menyelesaikan operasi melaraskan ketinggian baris mengikut saiz skrin. Di bawah saiz port pandangan yang berbeza, ketinggian garisan teks akan diskalakan mengikut saiz port pandangan semasa.

Adalah penting untuk ambil perhatian bahawa memandangkan vmin dan vmax dikira secara relatif kepada saiz port pandangan, berhati-hati harus digunakan apabila menggunakan unit ini untuk mengelakkan elemen membesar atau mengecut secara berlebihan. Selain itu, penyemak imbas yang berbeza mungkin mempunyai beberapa perbezaan dalam cara mereka mengira saiz port pandangan, jadi penggunaan sebenar mungkin sedikit berbeza.

Untuk meringkaskan, menggunakan unit CSS Viewport vmin dan vmax memberikan kemudahan dalam melaraskan ketinggian garisan mengikut saiz skrin. Dengan melaraskan ketinggian baris secara dinamik, kami boleh mencapai reka bentuk responsif yang lebih fleksibel dan boleh disesuaikan. Teknik ini boleh meningkatkan pengalaman pengguna pada pelbagai peranti mudah alih dan membolehkan halaman web kami menyesuaikan diri dengan lebih baik pada saiz skrin yang berbeza.

Atas ialah kandungan terperinci Petua untuk melaraskan ketinggian baris berdasarkan saiz skrin menggunakan CSS Viewport unit vmin dan vmax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!