css pour obtenir le plein écran

CSS (Cascading Style Sheets) est un langage de balisage utilisé pour décrire l'apparence et le style des pages Web. Il peut ajouter du style, de la mise en page et des effets interactifs aux documents HTML. Dans le développement front-end, il est souvent nécessaire d'obtenir un effet plein écran. Cet article explique comment utiliser CSS pour obtenir un effet plein écran.

1. Attribut plein écran

L'attribut plein écran (API Fullscreen) a été introduit dans CSS3, qui permet aux développeurs d'afficher certains éléments ou la page entière en plein écran dans une page Web. Grâce à l'attribut plein écran, vous pouvez effectuer certaines opérations lorsque la fenêtre du navigateur est en plein écran. L'utilisation de cet attribut peut permettre aux programmes Web d'obtenir une meilleure expérience utilisateur.

La syntaxe de cet attribut est la suivante :

element:fullscreen{
    /*全屏样式*/
}

Lorsque l'utilisateur appuie sur la touche plein écran ou effectue d'autres opérations standard en plein écran, l'élément sera agrandi par le navigateur pour remplir tout l'écran. En quittant l'état plein écran, l'élément revient à sa taille et sa position d'origine.

Il convient de noter que l'attribut plein écran n'est reconnu que par les navigateurs pris en charge, notamment Chrome, Firefox, Safari et IE11.

2. Obtenez un effet plein écran

Ci-dessous, nous montrerons comment utiliser l'API plein écran pour obtenir un plein écran pour des éléments individuels et un plein écran pour l'ensemble page.

1. Implémentez le plein écran pour les éléments individuels

Tout d'abord, ajoutez un élément qui doit être affiché en plein écran en HTML, par exemple :

<div id="fullscreen">
    ...
</div>

#🎜🎜 #Puis, en CSS Ajoutez le code suivant au style :

#fullscreen {
    width: 100%;
    height: 100%;
}

#fullscreen:fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #fff; /*全屏时的背景色*/
}

Dans le code, définissez d'abord la largeur et la hauteur de l'élément à 100%. Ensuite, un style supplémentaire a été ajouté à l'attribut plein écran (:fullscreen), notamment en définissant l'élément sur un positionnement fixe (position:fixed) afin que sa position soit basée sur la fenêtre du navigateur plutôt que sur l'élément parent. Définissez également la largeur et la hauteur de l'élément à 100 %. Enfin, pour positionner l'élément plein écran au-dessus des autres éléments, définissez l'index z sur 999. De plus, des styles supplémentaires peuvent être ajoutés pour modifier la couleur d’arrière-plan, les polices et d’autres styles en plein écran.

2. Pour obtenir l'effet plein écran de la page entière

Pour obtenir l'effet plein écran de la page entière, vous pouvez ajouter le style plein écran au HTML et éléments du corps :

html:fullscreen, 
body:fullscreen {
    height: 100%;
    overflow: hidden;
}

Cela définit les deux éléments en plein écran, puis définit leur hauteur à 100 %. De plus, pour empêcher les barres de défilement d’apparaître en mode plein écran, définissez l’attribut de débordement sur masqué. De cette façon, lorsque l'utilisateur appuie sur la touche plein écran du navigateur, la page entière sera agrandie pour s'adapter à la taille de l'écran.

Il convient de noter que lors de l'utilisation de l'API plein écran, le navigateur peut désactiver les fonctions de lecture automatique, telles que la lecture automatique de l'audio et de la vidéo. De plus, les événements du clavier et de la souris peuvent différer en mode plein écran.

3. Résumé

CSS Il est très simple d'obtenir l'effet plein écran, il suffit d'ajouter quelques propriétés CSS. Vous pouvez utiliser l'API plein écran pour définir les éléments d'une page Web à afficher en plein écran afin d'offrir une meilleure expérience utilisateur. Il convient de noter que l'attribut plein écran n'est valide que dans les navigateurs pris en charge et qu'il peut y avoir certaines restrictions en mode plein écran.

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!