La conception de page Web se déforme dans le moniteur de PC de bureau

Question

Je construis mon application Web sur mon ordinateur portable, mais lorsque je navigue sur la page de mon ordinateur de bureau, la disposition de la div est déformée.

Je pense que la solution donne le pourcentage au lieu de nombres absolus comme 240px à la hauteur et la largeur de divs.

Qu'en pensez-vous?

Avez-vous d'autres recommandations?

Merci d'avance.

Ce que je l'ai fait est:

<div style="height:240px;width:240px"></div> 

Ce que je pense que je dois faire est:

<div style="height:100%;width:90%"></div> 

Answer 1

Lorsque vous utilisez le dimensionnement relatif 'px' plutôt que 'pt' absolu, le navigateur correspond approximativement à la taille qui peut modifier votre mise en page en fonction des paramètres utilisateur pour les niveaux de zoom ou de texte, la version du navigateur, etc.

Si vous dimensionnez absolument la div de mise en page en utilisant des points (pt), vous ne devriez pas voir des changements basés sur le navigateur, la résolution d'écran, etc. Essayez

<div style="height:240pt;width:240pt"></div> 

référence sur la Grande par rapport vs gestion des polices absolue here

Answer 2

Que voulez-vous dire par « déformée »? At-il été enveloppé à la ligne suivante? C'est la seule façon de voir qu'il y a une distorsion.

Si vous souhaitez conserver des largeurs fixes, il vous suffit d'envelopper quelque chose d'autre autour de la largeur. Par exemple, si vous vouliez 2 divs côte à côte:

<div style="width: 800px"> 
    <div style="width: 300px; float: left;"></div> 
    <div style="width: 500px; float: left;"></div> 
</div> 

Depuis l'élément extérieur est 800px, et les éléments internes ne dépassent pas que, si l'écran est plus petit que 800px il aura juste un barre de défilement horizontal, et vos divs devraient toujours être heureusement côte à côte. Notez que si vous avez quelque chose comme des bordures ou un padding sur l'un des divs, cela va ajouter à la largeur (et la hauteur) de l'élément, alors prenez cela en compte.