Загрузка CSS в зависимости от разрешения экрана

Assasin

Существует только 2 способа загрузки файлов CSS в зависимости от ширины и высоты экрана, через JavaScript (Jquery) и средствами CSS @media

1. Загрузка файлов CSS через JavaScript (считается устаревшим методом)
В примере screen.height - это высота экрана, если нужна ширина - используйте screen.width

Код: Выделить всё

if (screen.height < 600) {
document.write ('<link href="css/min.css" rel="stylesheet" type="text/css">')
}
else if (screen.height == 600)
{
document.write ('<link href="css/800x600.css" rel="stylesheet" type="text/css">')
}
else if (screen.height == 768)
{
document.write ('<link href="css/1024x768.css" rel="stylesheet" type="text/css">')
}
else if (screen.height == 864)
{
document.write ('<link href="css/1152x864.css" rel="stylesheet" type="text/css">')
}
else
{
document.write ('<link href="css/max.css" rel="stylesheet" type="text/css">')
}

Этот метод не работает в мобильных браузерах из за отсутствия поддержки JavaScript, но можно схитрить добавив код

Код: Выделить всё

<noscript><link href='img/min.css' rel='stylesheet' type='text/css'></noscript>

2. Загрузка файлов CSS средствами CSS @media (не работает в слишком старых браузерах)
С этим способом я сам не до конца разобрался, походу он высчитывает не разрешение экрана а размер браузера, поэтому лучше работать с шириной - width (ну или кто что может подсказать по этому поводу)

Код: Выделить всё

<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 800px)" href="img/600.css">
<link rel="stylesheet" media="screen and (min-width: 1024px) and (max-width: 1024px)" href="img/768.css">
<link rel="stylesheet" media="screen and (min-width: 1152px) and (max-width: 1152px)" href="img/864.css">
<link rel="stylesheet" media="screen and (min-width: 1152px) and (max-width: 5000px)" href="img/max.css">