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

Question

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

if the clients resolution is <= 1024*768

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

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

Answer 1

CSS3 вводит media queries, но он новичок, и поддержка еще не так широко распространена (Firefox только представил ее в версии 3.5, например, и Internet Explorer не получит ее до тех пор, пока версия 9), так что создавайте с прогрессивным улучшением. В CSS-трюках есть учебное пособие для предоставления different CSS for different browser window sizes (это более полезная метрика, а затем разрешение экрана).

Вы можете проверить support for your browser.

Answer 2

Там эта опция, полностью на стороне клиента и 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 заявления для смартфонов и планшетов.

Answer 3

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

Это будет делать трюк, в одном 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 запроса верно, то в этом случае, когда экран более 500 пикселей.

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