CSS получить высоту разрешения экрана

Ответ 1

Невозможно получить высоту экрана из CSS. Однако, используя CSS3, вы можете использовать медиазапросы для управления отображением шаблона в соответствии с разрешением.

Если вы хотите кодировать на основе высоты с помощью медиа-запросов, вы можете определить таблицу стилей и назвать ее следующим образом.

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

Ответ 2

Вы можете использовать длину в процентах в окне просмотра.

Смотрите: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Он работает следующим образом:

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

Дополнительная информация также доступна через Сеть разработчиков Mozilla и W3C.

Ответ 3

На самом деле вам не нужно разрешение экрана, и вам нужны размеры браузера, потому что во многих случаях браузер окончен, и даже в максимальном размере браузер не будет принимать 100% экрана.

то, что вы хотите, это View-port-height и View-port-width:

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

это даст div с 50% внутренней высоты браузера и 25% его ширины.

(честно говоря, этот ответ был частью того, что хотел сказать @Hendrik_Eichler, но он только дал ссылку и не обратился к проблеме напрямую)

Ответ 4

В дополнение к @Hendrik Eichler Answer n vh использует n% исходного блока просмотра окна просмотра.

.element{
    height: 50vh; /* Would mean 50% of Viewport height */
    width:  75vw; /* Would mean 75% of Viewport width*/
}

Кроме того, высота окна просмотра предназначена для устройств любого разрешения, высота порта просмотра, ширина - один из лучших способов (аналогично дизайну CSS, использующему значения%, но основывающемуся на высоте и ширине порта представления устройства)

В.Х.
Равно 1% от высоты исходного окна просмотра, содержащего блок.

оч.сл.
Равно 1% от ширины исходного окна просмотра, содержащего блок.

VI
Равно 1% от размера исходного содержащего блока в направлении оси корневых элементов.

В.Б
Равно 1% от размера исходного содержащего блока в направлении оси блока корневых элементов.

Vmin
Равно меньшему из vw и vh.

Vmax
Равно большему из vw и vh.

Ref:https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Ответ 5

Вы можете привязать текущую высоту и ширину экрана к переменным CSS: var(--screen-x) и var(--screen-y) с помощью этого JavaScript:

var root = document.documentElement;

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

Это было напрямую адаптировано из примера Ле Веру в ее выступлении по переменным CSS здесь: https://leaverou.github.io/css-variables/#slide31

Ответ 6

Вы можете легко получить высоту окна в чистом CSS, используя единицы "vh", каждый из которых соответствует 1% высоты окна. В приведенном ниже примере давайте начнем централизовать block.foo, добавив половину поля в крайнем размере экрана.

.foo{
    margin-top: 50vh;
}

Но это работает только для размера окна. С помощью javascript вы можете сделать его более универсальным.

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

Этот код создаст переменную CSS с именем "--windowHeight", которая несет высоту окна. Чтобы использовать его, просто добавьте правило:

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

И почему он более универсален, чем просто использовать единицы "vh"? Потому что вы можете получить высоту любого элемента. Теперь, если вы хотите централизовать block.foo в любом контейнере .bar, вы можете:

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

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

И, наконец, для ответа на изменения в размере окна вы можете использовать (в этом примере контейнер составляет 50% высоты окна):

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

Ответ 7

Чтобы получить разрешение экрана, вы также можете использовать jquery. Эта ссылка поможет вам решить очень многое.

Ответ 8

Чтобы использовать разрешение экрана, используйте Javascript вместо CSS: Используйте screen.height для высоты и screen.width для ширины.

Ответ 9

Используйте высоту и ширину в процентах.

Например:

width: 80%;
height: 80%;