условное утверждение для разрешения экрана?

Question

Я хотел бы использовать условный оператор для присоединения другой таблицы стилей для:

if the clients resolution is <= 1024*768

Я уверен, что это возможно, но никогда не видел код для негораньше?

пс.Я не ищу решение javascript

Answer 1

Обычно люди не «прикрепляют другую таблицу стилей» для разрешения экрана, потому что вы можете изменить размер браузера после загрузки страницы, изменить разрешение, и вы не хотите загружать файл каждый раз, когда вы это делаете.

Это поможет, в одном файле CSS:

Ex:

/* css as usual */
.this-class { font-size: 12px; }

/* condition for screen size minimum of 500px */
@media (min-width:500px) {

  /* your conditional / responsive CSS inside this condition */

  .this-class { font-size: 20px; }

}

Это должно изменить размер шрифта на 20px, когда условие запроса @media истинно, в этом случае, когда экран превышает 500px.

По мере увеличения размера вашего браузера вы увидите, что условные правила CSS вступают в силу автоматически, JS не требуется.

Answer 2

CSS 3 представляет медиазапросы , но он является новым, и поддержка еще не так широко распространена (например, Firefox представил его только в версии 3.5, и Internet Explorer не получит его до версии 9) так что строить с прогрессивным улучшением в виду.У CSS Tricks есть учебник по предоставлению различных CSS для разных размеров окна браузера (что является более полезным показателем, чем разрешение экрана).

Вы можете проверить поддержку вашего браузера .

Answer 3

Есть такая опция, полностью на стороне клиента и на основе javascript , добавьте тег сценария:

<script type="text/javascript">

if (screen.height < 900) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');

} 

</script>

Вы можете даже добавить другие операторы if для смартфонов и планшетов.