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

им трудно получить высоту более низкого разрешения экрана, потому что мое разрешение экрана 1920x1080 кто-нибудь знает, как получить разрешение экрана по высоте и ширине? потому что у моего друга есть разрешение 1024x768, когда он проверил мою работу на своем компьютере, все испортилось, это моя единственная проблема, когда дело доходит до CSS высоты и ширины.

16
css

8 ответов

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

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

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

вы можете использовать viewport-процентные длины.

см.: 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 по.

89

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

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

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

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

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

14

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

.foo{
    margin-top: 50vh;
}

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

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

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

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

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

$(':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 );
});
4

вы можете привязать текущую высоту и ширину экрана к переменным 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

3

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

0

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

0

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

например:

width: 80%;
height: 80%;
-7