css obtenir la hauteur de la résolution de l'écran
je vais avoir un moment difficile l'obtention de la hauteur de la basse résolution de l'écran parce que la résolution de mon écran est de 1920 x 1080 personne ne sait comment obtenir la hauteur et la largeur de la résolution de l'écran?
parce que mon ami a résolution 1024x768, quand il a vérifié mon travail dans son ordinateur, son tout foiré, c'est mon seul problème quand il s'agit de CSS la hauteur et la largeur.
source d'informationauteur FishBowlGuy
Vous devez vous connecter pour publier un commentaire.
Il n'est pas possible d'obtenir la hauteur de l'écran à partir de CSS. Cependant, l'utilisation de depuis CSS3, vous pouvez utiliser les media queries pour contrôler l'affichage du modèle que par la résolution.
Si vous voulez le code, sur la base de la hauteur en utilisant des requêtes de média, vous pouvez définir la feuille de style et l'appeler comme ça.
Vous pouvez utiliser viewport pourcentage des longueurs.
Voir: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
Il fonctionne comme ceci:
Plus d'infos également disponibles par le biais de Mozilla Developer Network et W3C.
Vous avez réellement n'avez pas besoin de la résolution de l'écran, ce que vous voulez, c'est le navigateur dimensions, car dans de nombreux cas, le navigateur est en mode fenêtré, et même dans agrandi la taille du navigateur ne les prend pas 100% de l'écran.
ce que vous voulez, c'est la Vue-port-la hauteur et la Vue-port-largeur:
cela rendra un div avec 50% de l'intérieur du navigateur de la hauteur et de 25% de sa largeur.
(pour être honnête, cette réponse a été une partie de ce que @Hendrik_Eichler voulais dire, mais il a seulement donné un lien et de ne pas aborder la question directement)
Vous pouvez obtenir la hauteur de la fenêtre assez facilement en pur CSS, en utilisant les unités "vh", chacun correspondant à 1% de la hauteur de la fenêtre. Sur l'exemple ci-dessous, nous allons commencer à centraliser bloc.foo par l'ajout d'un margin-top de la moitié de la taille de l'écran.
Mais qui ne fonctionne que pour la "fenêtre" taille de. Avec un peu de javascript, vous pouvez le rendre plus polyvalent.
Que le code va créer un CSS variable nommée "--windowHeight" qui porte la hauteur de la fenêtre. Pour l'utiliser, il suffit d'ajouter la règle:
Et pourquoi est-il plus polyvalent que d'utiliser simplement "vh" unités? Parce que vous pouvez obtenir la hauteur de n'importe quel élément. Maintenant, si vous souhaitez centraliser un bloc.foo dans n'importe quel conteneur.bar, vous pouvez:
Et enfin, pour répondre à des changements sur la taille de la fenêtre, vous pouvez utiliser (dans cet exemple, le conteneur est de 50% de la hauteur de la fenêtre):
Vous pouvez lier la hauteur et la largeur de l'écran pour css variables:
var(--screen-x)
etvar(--screen-y)
avec ce javascript:Cela est directement adapté de lea verou l'exemple dans son discours sur le css variables ici: https://leaverou.github.io/css-variables/#slide31
Afin d'obtenir la résolution de l'écran, vous pouvez également utiliser les jquery.
Cette lien vous aider beaucoup à résoudre.
Pour obtenir la résolution de l'écran utilisation doit utiliser Javascript au lieu de CSS:
Utilisation
screen.height
de la hauteur et descreen.width
pour la largeur.Utilisation de la hauteur et la largeur en pourcentage.
Par exemple: