Comment le positionnement absolu CSS de l'ordinateur peut-il être affiché normalement sous différentes résolutions ?

Cet article présente principalement comment le positionnement absolu CSS peut afficher la position de positionnement normalement sur des ordinateurs avec différentes résolutions. Cet article explique d'abord les résolutions informatiques courantes. Pour que la page s'affiche normalement sous différentes résolutions, une largeur sûre doit être donnée. vers la page. , puis utilisez le positionnement absolu. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes de fonctionnement spécifiques. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Parfois, lorsque nous écrivons une page, nous constatons que l'élément parent positionné de manière absolue a été positionné de manière relative. Cependant, sur des ordinateurs avec des résolutions différentes, le positionnement absolu sera toujours confus. du parent n'est pas Cela a fonctionné.

Tout d'abord, vous devez comprendre les principes suivants :

1 La résolution des ordinateurs portables est généralement d'environ 1366*768, et la résolution des PC est généralement de 1920. *1080 ;

Les résolutions informatiques courantes suivantes sont les suivantes :

Lors de la rédaction d'une page Web, si vous l'écrivez dans une grande résolution telle que 1920, alors accéder à une petite résolution Si vous regardez la même page Web sur un ordinateur portable à haute vitesse, vous constaterez que l'ordinateur portable affiche essentiellement la page Web agrandie à environ 1,5 fois sur un grand écran large.

2. Pour que la page s'affiche normalement sous différentes résolutions, une largeur de sécurité doit être donnée à la page. Généralement, lors de la création d'une page de 1920 pixels de large, il doit y avoir une largeur de sécurité. largeur d'environ 1 200 px au milieu et centré. Tout le contenu doit être écrit dans une zone de cette largeur. S'il existe une image d'arrière-plan ou une image de carrousel qui doit couvrir la totalité de la page, elle doit être alignée au centre, de sorte que lorsque la résolution est réduite, l'image d'arrière-plan ou Image de bannière. Les cases d'une largeur de 1200 à gauche, à droite et au milieu sont toujours centrées et ne s'écarteront pas vers la gauche ou la droite.

Les petites cases telles que p dans la case peuvent être exprimées en pourcentages pour réaliser une adaptation de page.

Utilisation du positionnement absolu :

Lors d'un positionnement absolu, l'élément parent de l'élément doit penser à le définir sur un positionnement relatif, afin que il peut être utilisé dans différentes situations. Le positionnement ne sera pas gâché par la résolution, mais le principe est que l'élément parent se trouve dans une largeur sûre si l'élément parent lui-même est un élément qui changera en raison de l'abaissement de la largeur. résolution, le positionnement sera définitivement foiré.

Lors de la mise en page de la structure de la page, certains cadres de boîte sont essentiels, comme p avec une largeur de sécurité de 1200px.

Par exemple : Créez une page d'événement, où l'arrière-plan de cette page est une grande image. Quelques petites images doivent être placées sur la grande image pour la positionner avec la grande image. directement comme arrière-plan !

Au lieu de cela, continuez à mettre une largeur sûre p dans le p de l'arrière-plan de l'image agrandie, puis utilisez-le comme élément parent pour le positionnement relatif et le positionnement absolu pour les éléments enfants à l'intérieur, afin qu'il n'apparaisse pas sous différentes résolutions. Le problème du positionnement absolu prête à confusion.

En résumant l'expérience des internautes, en ajoutant l'attribut zoom, une certaine section de la page peut être automatiquement zoomée sur la zone appropriée selon différentes résolutions. Cependant, il y a un bug même Firefox ne le prend pas en charge. cet attribut. , même en utilisant l'attribut transform:scale(x,y); Il y a aussi un petit problème lorsque le chargement de la page est lent, l'actualisation de la page affichera d'abord l'effet agrandi, puis passera à l'effet réduit, qui clignotera pendant un moment, et je n'ai pas trouvé de solution à cela. J'espère que des amis qui en savent plus pourront le partager.

le code de zoom est le suivant :

$(function(){        var w=window.screen.width;        var zoom=w/1920;

$("#container").css({
        "zoom",zoom,
        "-moz-transform":"scale("+zoom+")",
　　　　　　"-moz-transform-origin":"top left"
      });
 });

zoom : largeur de la résolution actuelle de l'écran/1920

attribut de zoom ; Prise en charge du navigateur :

Le résultat est : à l'exception de Firefox, d'autres navigateurs peuvent normalement prendre en charge l'attribut de zoom, et le bloc entier de la page qui doit être zoomé est mis à l'échelle pour s'adapter à la résolution actuelle. L'effet de transform:scale est d'abord d'afficher la page comme si elle avait agrandi la page d'origine, puis d'utiliser l'échelle. La réduction est équivalente à l'effet de réduction de la page actuelle, et les deux côtés le seront naturellement. laissé vide.

Recommandations associées :

Positionnement relatif et positionnement absolu en HTML

Tableau détaillé des avantages et des inconvénients de la technologie de centrage de positionnement absolu CSS

Introduction et utilisation du positionnement relatif et du positionnement absolu en CSS

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!