J'ai un div avec différentes tailles. Il peut avoir les dimensions suivantes : Hauteur : 780, Largeur : 1390 ou Hauteur : 524, Largeur : 930.
Les applications React s'affichent sur deux types d'écrans : Full HD 1920x1080 et 4K 3840x2054.
Je veux que le div soit de tailles et d'écrans différents afin qu'il ait toujours les mêmes proportions à l'écran et les mêmes dimensions dans les deux types d'écrans.
Par exemple, je souhaite que le div soit différent sur d'autres types d'écrans, comme les tablettes, les smartphones ou les écrans 1920x1200. Je veux le rendre aussi flexible que possible.
En 4K, le div semble beaucoup plus petit que le reste de l'écran, tandis qu'en Full HD, il occupe la majeure partie de l'écran.
J'ai essayé d'utiliser vh et vw comme suit :
function convertPxToVH(px) {
var vh = (px / 1080) * 100;
return vh;
}
function convertPxToVW(px) {
var vw = (px / 1920) * 100;
return vw;
}
De cette façon, j'obtiendrai les mêmes vh et vw pour chaque type d'écran. Mais ça ne marche pas bien car en écran 4k le div a plus d'espace en full HD.
C'est le résultat que je souhaite obtenir (je souhaite évidemment que cela fonctionne également sur d'autres types d'écrans). Merci d'avance à tous ceux qui m'aideront
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez y parvenir en utilisant
width和height以及vw和vhcss.vw表示视口宽度的百分比，因此80vw是宽度的 80%。这与vhIdem, juste différent en hauteur.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>