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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh mencapai ini dengan menggunakan
width和height以及vw和vhcss.vw表示视口宽度的百分比，因此80vw是宽度的 80%。这与vhSama, 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>