简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Secara automatik menyesuaikan diri dengan bekas div dalam Javascript
P粉806834059
P粉806834059 2023-09-13 19:20:46
0
1
528

Saya mempunyai div dengan saiz yang berbeza. Ia boleh mempunyai dimensi berikut: Tinggi: 780, Lebar: 1390, atau Tinggi: 524, Lebar: 930.

Aplikasi React dipaparkan pada dua jenis skrin: HD Penuh 1920x1080 dan 4K 3840x2054.

Saya mahu div mempunyai saiz dan skrin yang berbeza supaya ia sentiasa mempunyai perkadaran yang sama dalam skrin dan dimensi yang sama dalam kedua-dua jenis skrin.

Sebagai contoh, saya mahu div berbeza pada jenis skrin lain, seperti tablet, telefon pintar atau skrin 1920x1200. Saya mahu menjadikannya sefleksibel yang mungkin.

Dalam 4K div kelihatan jauh lebih kecil daripada seluruh skrin, manakala dalam HD Penuh ia menggunakan sebahagian besar skrin.

Saya cuba menggunakan vh dan vw seperti berikut: 

function convertPxToVH(px) {
    var vh = (px / 1080) * 100;
    return vh;
  }

  function convertPxToVW(px) {
    var vw = (px / 1920) * 100;
    return vw;
  }

Dengan cara ini saya akan mendapat vh dan vw yang sama untuk setiap jenis skrin. Tetapi ia tidak berfungsi dengan baik kerana dalam skrin 4k div mempunyai lebih banyak ruang dalam HD penuh.

Ini adalah hasil yang saya mahu capai (jelas saya mahu ia berfungsi pada jenis skrin lain juga). Terima kasih terlebih dahulu kepada semua yang membantu saya

P粉806834059
P粉806834059

membalas semua(1)
P粉366946380
P粉3669463802023-09-14 16:43:48 Tingkat 1

Anda boleh mencapai ini dengan menggunakan width 和 height 以及 vw 和 vh css.

vw 表示视口宽度的百分比，因此 80vw 是宽度的 80%。这与 vh Sama, cuma berbeza ketinggian. 

body { background-color: #00305e; }

.keep-prop {
  background-color: #ffc700;
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>

  <head>
  </head>
  
  <body>

    <div class="keep-prop">
    </div>
  </body>

</html>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！