Comment utiliser CSS3 pour faire correspondre les écrans horizontaux et verticaux

Cet article présente principalement une méthode simple pour utiliser CSS3 pour faire correspondre les écrans horizontaux et verticaux. Il utilise principalement le @media nouvellement ajouté dans CSS3. Les amis dans le besoin peuvent s'y référer

Écrit sur le. en même temps Dans un seul CSS

@media screen and (orientation: portrait) {   
  /*竖屏 css*/  
}    
@media screen and (orientation: landscape) {   
  /*横屏 css*/  
}

écrit séparément dans 2 CSS
écran vertical

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

écran horizontal

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Où postuler

(1) Le contenu des éléments de page WEB mobile est généralement défini par des pourcentages afin qu'il puisse être affiché sur des appareils avec différentes résolutions Normal. affichage, malgré cela, la largeur et la hauteur de la résolution d'écran des appareils mobiles sont toujours très différentes. Lorsque la même page est tournée sur l'écran, la largeur de l'élément définie par le pourcentage peut devenir très grande, ce qui perdra sa beauté. la page. De cette façon, si vous utilisez l'orientation pour correspondre à l'état de retournement de l'écran, vous pouvez écrire différents CSS pour contrôler le style de la page.

(2) Pour les pages WEB mobiles avec des images d'arrière-plan, vous pouvez faire correspondre l'état de l'écran en fonction de l'orientation et définir différents arrière-plans.

(3) Un point un peu technique : certaines pages WEB avec des éléments positionnés de manière absolue positionnent un élément en bas de la page Lorsque l'écran est en mode portrait, c'est peut-être parce que la longueur totale de la page est inférieure à . la hauteur de l'écran (mais supérieure à la largeur de l'écran), il est correct de positionner l'élément en position absolue vers le bas. Cependant, lorsque l'écran est basculé en mode paysage, car la hauteur du contenu de la page est supérieure à la hauteur de l'écran (c'est-à-dire). la largeur de l'écran avant de le retourner), l'élément positionné de manière absolue couvrira le contenu de la page entraînera des problèmes sur la page. Dans ce cas, vous pouvez utiliser l'orientation pour correspondre à l'état de l'écran et ajuster le code CSS.

À propos de la correspondance de l'état de l'écran horizontal et vertical, vous pouvez également le juger via JS. Onorientationchange dans JS est un événement de fenêtre, et vous pouvez faire correspondre l'écran horizontal et vertical en écoutant l'événement.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

CSS3 et jQuery implémentent l'effet Hover qui suit la direction de la souris

Attribut de disposition de table CSS Utilisation

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!