Я хотел бы использовать условный оператор, чтобы прикрепить другую таблицу стилей для:условное выражение для разрешения экрана?
if the clients resolution is <= 1024*768
Я уверен, что это возможно, но никогда не видел код для этого раньше?
пс. Я не ищу javascript-решение
CSS3 вводит media queries, но он новичок, и поддержка еще не так широко распространена (Firefox только представил ее в версии 3.5, например, и Internet Explorer не получит ее до тех пор, пока версия 9), так что создавайте с прогрессивным улучшением. В CSS-трюках есть учебное пособие для предоставления different CSS for different browser window sizes (это более полезная метрика, а затем разрешение экрана).
Вы можете проверить support for your browser.
Там эта опция, полностью на стороне клиента и 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 заявления для смартфонов и планшетов.
он просит не-javascript-решение. –
Обычно люди не «прикрепляют другую таблицу стилей» для разрешения экрана, потому что вы можете изменять размер браузера после загрузки страницы, меняя разрешение, и вы не хотите, чтобы загрузка файла выполнялась каждый раз.
Это будет делать трюк, в одном 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.
хороший ответ, рекомендуется: D – ncomputers
Да, стыдно, что между 1024 * 768 и старыми браузерами существует сильная корреляция (без css3)! - с нетбуками на подъеме корреляция res-css может измениться. – Haroldo
Итак, создайте узкие дисплеи и используйте медиа-запрос для обнаружения более широких окон и переопределения макета. – Quentin
Обновление: с 2010 года многое изменилось, и запросы на мультимедиа CSS в настоящее время принимаются во всем мире и поддерживаются во всех основных браузерах. –