简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
S'adapter automatiquement aux conteneurs div en Javascript
P粉806834059
P粉806834059 2023-09-13 19:20:46
0
1
527

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

P粉806834059
P粉806834059

répondre à tous(1)
P粉366946380
P粉3669463802023-09-14 16:43:48 1 plancher

Vous pouvez y parvenir en utilisant width 和 height 以及 vw 和 vhcss.

vw 表示视口宽度的百分比，因此 80vw 是宽度的 80%。这与 vh Idem, 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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！