L’en-tête adaptée au plein écran

L’en-tête adaptée au plein écran

Comment préparer un L’en-tête adaptée au plein écran? Il existe de nombreuses solutions pour cette tâche et beaucoup mieux ou pire effets finaux. Chaque qui satisfait les hypothèses de l’auteur, il peut être suffisant. L’entrée suivante montre comment créer un conteneur <div>, la taille d’une fenêtre de navigateur sur votre ordinateur, tablette ou smartphone. En plaçant un tel récipient comme le premier sous la balise <body> a pour effet d’une fenêtre complète après la page est ouverte. En arrière-plan, vous pouvez utiliser une image, une vidéo ou gif, et dans le menu de vente de premier plan. Un élément important de cette solution est que l’arrière-plan sera adapté à la fenêtre, coupant ses parties extrêmes, et le conteneur <div> se déplace dans son intégralité. Un exemple d’une telle solution est une page PerfectSoft ou relaksowanie.pl.

éléments nécessaires de code

L’ensemble se compose de petits blocs de code, qui pour plus de clarté seront fournis dans des fichiers séparés. Le premier sera présenté code html qui attache les fichiers css et javascript, et dans la section du corps montre l’en-tête de conteneur (« grand-tête ») et le texte de conteneurs dans le reste de la page (« outside_header »). fichier de démarrage « demo.js » doit être trouvé pour conteneur « grand-tête » parce qu’il était là fonction définie et son appel. Cela vous permet d’exécuter le plus rapidement après la formation du récipient, mais il peut être changé librement, sans compromettre la fonctionnalité du code.

 

Dans le fichier « style.css », le plus important est de mettre le dossier « margin: 0; » pour la balise body. En dehors de cette entrée ne sera pas possible d’atteindre en plein écran, comme cela sera inclus par les marges par défaut. Il convient également d’étendre cette fiche d’autres balises qui ne devraient pas avoir des marges ou des cadres. Un exemple de fichier d’écriture:

 

Fichier « component.css » a été préparée pour la détermination de l’en-tête de conteneur (« grand-tête »).

 

Le dernier fichier est « demo.js. » Il est la fonction est appelée régulation de la taille de l’en-tête de conteneur (« grand-tête »).

Les premiers magasins à la hauteur variable de la fenêtre, car la largeur du match grâce à une entrée dans le css (« width: 100%; »). A cet effet, est le « innerHeight » qui a la largeur de la fenêtre sans que les divers types de curseurs, et d’autres caractéristiques – fenêtre intérieure elle-même. Dans le cas présent, ce qui est crucial, car le champ « Hauteur » – donnant la pleine largeur de la fenêtre, il y aurait de vérifier sur certains appareils.
Ensuite, la « largeHeader » variable est affectée au récipient par son identifiant et en utilisant les propriétés attribuées est obtenue avant que la largeur de la fenêtre.

Loading Facebook Comments ...

Laisser un commentaire

Or