2

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

<link rel="stylesheet" type="text/css" href="css/demo2.css" media="only screen and (max-height: 768px)" />
<link rel="stylesheet" type="text/css" href="css/demo.css" media="only screen and (min-height: 800px)" />
<link rel="stylesheet" type="text/css" href="css/style2.css" media="only screen and (max-height: 768px)" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="only screen and (min-height: 800px)"  />

На запрос max-height: 768px все работает замечательно но если смотрю на другом мониторе на котором по идее должен сработать min-height: 800px, он не работает и сайт стоит без стилей вообще. Подскажите, как это поправить.

5
  • а на мониторе какого разрешения смотришь?
    – LeD4eG
    6 ноя 2012 в 6:12
  • Сначала смотрю на буке 1366 на 768 потом на компе 1400 на 900 6 ноя 2012 в 6:29
  • У меня та самая задача...Что ты используешь для IE?
    – koza4ok
    6 ноя 2012 в 6:43
  • У меня не в одном браузере эта штука не работает 6 ноя 2012 в 6:46
  • Для IE ничего не использую 6 ноя 2012 в 6:47

3 ответа 3

1

Еще должно сработать, если заменить min-height на min-device-height.

0

Нашел решение своей проблемы с помощью JavaScript. Единственный недостаток что страницу в некоторых случаях приходиться обновлять дважды.

 <script language="JavaScript">
    <!--
    if (screen.height <= '1024') {
       document.write ('<link href="style1024.css" rel="stylesheet" type="text/css">'); 
    }; 
    //-->
    </script>
1
  • Не очень решение, чем вам это не угодило: @import "/path/to/style.css" screen and (max-width: 1024px); ?
    – ferrari
    1 апр 2015 в 11:24
0

Сделайте один главный файл стилей main.css, и лепите там:

@import "/path/to/style.css" screen and (max-width: 1280px);

И это чистый CSS, а если занимаетесь вёрсткой профессионально (или планируете) то используйте препроцессор, например такой: http://compass-style.org

Там все такие проблемы решаются ещё проще и удобнее такой штукой как SASS\SCSS Media Query Mixin ( http://paranoida.github.io/sass-mediaqueries/ ) + много всяких плюшек, таких как возможнось всё минимизировать сразу и скажем забыть про вендорные префиксы.

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.