Implémentation qui s'adapte aux appareils de différentes tailles

Parfois, nous avons besoin de faire en sorte que le contenu occupe exactement un écran et s'adapte à des appareils de différentes tailles. Ne parlons pas de la façon dont cela entraînera un affichage insatisfaisant sur certains appareils, mais parlons directement de la façon de le mettre en œuvre.

La première chose à laquelle nous pouvons penser est que les valeurs de largeur, de hauteur et de marge (margin, padding) de tous les éléments au niveau du bloc sur le Les pages sont toutes en pourcentages chantés.
Dans la direction horizontale, la largeur et la valeur d'espacement horizontal, s'il s'agit d'une valeur en pourcentage, sa valeur est calculée par rapport à la largeur de son élément parent, qui peut s'adapter à des appareils de différentes tailles dans la direction horizontale.
Dans le sens vertical, si la valeur de la hauteur est un pourcentage, sa valeur est calculée par rapport à la hauteur de l'élément parent. Mais si la valeur d'espacement vertical est un pourcentage, sa valeur est calculée par rapport à la largeur (et non à la hauteur) de l'élément parent, haha ​​​​(impuissant~~~).

Par conséquent, nous pouvons utiliser la solution en pourcentage dans le sens horizontal pour l'adaptation. L'orientation verticale nécessite d'autres solutions.

Pouvons-nous utiliser les requêtes multimédias CSS3 ? Je ne peux pas le faire. Bien que Media Queries prenne en charge les requêtes pour les hauteurs des appareils, il nous est impossible d'énumérer les hauteurs de tous les appareils et d'écrire un ensemble de CSS pour chaque appareil avec des hauteurs différentes. Si vous n’avez besoin d’être compatible qu’avec quelques appareils en hauteur, vous pouvez envisager cette solution.

Voici quelques solutions.

Utilisez JS pour implémenter

Le principe est de définir la hauteur sur l'élément en utilisant data-style-height attribut<.>. Sa valeur est la fraction de la hauteur de l'élément parent. Lorsque la page est initialisée, JS attribuera une valeur à la hauteur de l'élément en fonction de cette valeur, de la hauteur de l'élément parent et du nombre total de hauteurs de l'élément parent. Par exemple,

<p>
  <p id="a" data-style-height="1"></p>
  <p id="b" data-style-height="2"></p>
</p>

Dans le code ci-dessus, le nombre total de parties de la hauteur de l'élément parent est de 3, la hauteur de a occupe 1 partie et la hauteur de b occupe 2 parties. Supposons que la hauteur de l'élément parent est de 100 px, alors la hauteur de a est

et la hauteur de b est (1 / 3 * 100)px. (2 / 3 * 100)px

De même, utilisez ces attributs pour définir l'espacement : data-style-

margin-top, data-style-margin-bottom, data-style- padding-top, data-style-padding-bottom. Lorsque la page est initialisée, JS attribuera l'espacement correspondant à l'élément en fonction de la valeur de l'attribut.

Voir ici pour le code d'implémentation spécifique.

Le principe de l'utilisation de flex pour implémenter

est fondamentalement le même que celui de l'utilisation de JS. L'implémentation utilisant flex utilise simplement la fonctionnalité selon laquelle les éléments flex avec une valeur

supérieure à 0 deviendront automatiquement plus grands lorsque l'espace parent est grand, au lieu des calculs JS. flex-grow

Le principe spécifique est de définir la hauteur sur l'élément à l'aide de l'attribut data-style-height, et de définir le style sur son élément parent <a href="http://www.php.%20cn/wiki/927%20.html" target="_blank">affichage<p>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank"> direction<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: column;: colonne;

. Lorsque la page est initialisée, JS définira flex-grow:属性值 sur l'élément en fonction de cette valeur. L'espacement est implémenté à l'aide d'éléments avec l'attribut data-style-height et un contenu vide.

Voir ici pour le code d'implémentation spécifique.

Utilisez des images pour implémenter

Si le contenu ne nécessite pas d'interaction, vous pouvez transformer la page entière en image. Bien sûr, la post-maintenance sera un peu délicate si vous faites cela.

HTML :

<img class="fullpage" src="...">

CSS :

html,body{
  height: 100%;
}
.fullpage{
  width: 100%;
  height: 100%;
}

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!