cari

Rumah >hujung hadapan web >tutorial css >Bagaimana untuk melaksanakan kuasa dua penyesuaian dalam css

Bagaimana untuk melaksanakan kuasa dua penyesuaian dalam css

WBOY
WBOYasal
2021-11-22 11:49:235372semak imbas

Cara melaksanakan segi empat sama suai dalam CSS: 1. Tambahkan gaya "lebar: nilai lebar %;" pada elemen untuk menjadikan lebar unsur segi empat sama menyesuaikan diri 2. Tambah "tinggi: nilai lebar vw ;" kepada elemen. Gaya, hanya jadikan ketinggian unsur segi empat sama penyesuaian.

Bagaimana untuk melaksanakan kuasa dua penyesuaian dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara melaksanakan kuasa dua penyesuaian dalam css

Memandangkan ketinggian tidak tetap, nilai ketinggian tidak boleh digunakan secara langsung. Oleh itu, idea penukaran menggunakan nilai lebar untuk melaksanakan penetapan ketinggian segi empat sama. Jadi secara teori, sebarang kaedah yang boleh menggunakan atribut lebar kepada atribut ketinggian boleh digunakan.

Jadi kita boleh menggunakan unit vw 1 vw bersamaan dengan 1% daripada lebar halaman Contohnya, lebar halaman ialah 1000px, kemudian 1vw ialah 10px.

Contoh adalah seperti berikut: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
    .placeholder {
  width: 50%;
  height: 50vw;
  background:green;
}
    </style>
<div class="placeholder"></div>  
</body>
</html>

Hasil keluaran:

Bagaimana untuk melaksanakan kuasa dua penyesuaian dalam css

(Belajar perkongsian video: css tutorial video )

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kuasa dua penyesuaian dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Apakah sifat css untuk mencapai putaran 45 darjah?Artikel seterusnya：Apakah sifat css untuk mencapai putaran 45 darjah?

Artikel berkaitan

Lihat lagi