css obtener la altura de la resolución de pantalla

Question

Tengo dificultades para obtener la altura de la resolución de pantalla inferior porque mi resolución de pantalla es de 1920x1080 ¿Alguien sabe cómo obtener la resolución de pantalla de alto y ancho? porque mi amigo tiene una resolución de 1024x768 cuando revisó mi trabajo en su computadora, todo está mal, este es mi único problema cuando se trata de CSS de alto y ancho.

Answer 1

No es posible obtener el alto de la pantalla desde CSS. Sin embargo, desde CSS3 puede usar media queries para controlar la visualización de la plantilla según la resolución.

Si desea codificar en base a la altura mediante consultas de medios, puede definir la hoja de estilo y llamarla así.

<link rel="stylesheet" media="screen and (device-height: 600px)" /> 

Answer 2

Para obtener la resolución de pantalla, también puede usar jquery. Este link te ayuda mucho a resolver.

Answer 3

Use alto y ancho en porcentaje.

Por ejemplo:

width: 80%; 
height: 80%; 

Answer 4

Usted podría utilizar longitudes de visualización de la porcentuales.

Ver: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Funciona así:

.element{ 
    height: 100vh; /* For 100% screen height */ 
    width: 100vw; /* For 100% screen width */ 
} 

Más información también está disponible a través Mozilla Developer Network y W3C.

Answer 5

Para obtener la resolución de pantalla, use JavaScript en lugar de CSS: Use screen.height para la altura y screen.width para la anchura.

Answer 6

En realidad no necesita la resolución de la pantalla, lo que quiere son las dimensiones del navegador porque en muchos casos el navegador tiene ventana, e incluso en tamaño maximizado el navegador no tomará el 100% de la pantalla.

lo que quiere es una vista de puerto de altura y View-puerto-width:

<div style="height: 50vh;width: 25vw"></div> 

Esto hará que un div con un 50% de la altura del navegador interno y el 25% de su anchura.

(para ser honesto esta respuesta era parte de lo @Hendrik_Eichler quería decir, pero él sólo dio un enlace y no aborda la cuestión directamente)

Answer 7

Puede obligar a la altura y anchura actual de la pantalla a las variables css: var(--screen-x) y var(--screen-y) con este javascript:

var root = document.documentElement; 

document.addEventListener('resize',() => { 
    root.style.setProperty('--screen-x', window.screenX) 
    root.style.setProperty('--screen-y', window.screenY) 
}) 

este fue adaptado directamente del ejemplo lea de verou en su charla sobre las variables css aquí: https://leaverou.github.io/css-variables/#slide31

Answer 8

Usted puede obtener el viento La altura del árbol es bastante fácil en CSS puro, utilizando las unidades "vh", cada una correspondiente al 1% de la altura de la ventana. En el siguiente ejemplo, comencemos a centralizar block.foo agregando un margen superior a la mitad del tamaño de la pantalla.

.foo{ 
    margin-top: 50vh; 
} 

Pero eso solo funciona para el tamaño de 'ventana'. Con un toque de javascript, podrías hacerlo más versátil.

$(':root').css("--windowHeight", $(window).height()); 

Ese código creará una variable CSS llamado "--windowHeight" que lleva a la altura de la ventana. Para usarlo, basta con añadir la regla:

.foo{ 
    margin-top: calc(var(--windowHeight)/2); 
} 

Y por qué es más versátil que el simple uso de unidades "VH"? Porque puedes obtener la altura de cualquier elemento. Ahora bien, si desea centralizar un block.foo en cualquier container.bar, usted podría:

$(':root').css("--containerHeight", $(.bar).height()); 
$(':root').css("--blockHeight", $(.foo).height()); 

.foo{ 
    margin-top: calc(var(--containerHeight)/2 - var(--blockHeight)/2); 
} 

Y, por último, para que responda a los cambios en el tamaño de la ventana, se puede utilizar (en este ejemplo, el contenedor es el 50% de la altura de la ventana):

$(window).resize(function() { 
    $(':root').css("--containerHeight", $(.bar).height()*0.5); 
});