Высота или ширина медиа-запроса не работает

0

Я пытаюсь настроить некоторые медиа-запросы в своем HTML, но у меня проблема. Я хотел бы, чтобы запрос смотрел на ширину и высоту устройства и использовал соответствующую таблицу стилей. Насколько я могу судить, он смотрит на высоту, но не на ширину. Вот мой код:

<link rel="stylesheet" media='screen and (min-width: 1500px), screen and (min-height: 701px)' href="style.css" type="text/css" />
<link rel="stylesheet" media='screen and (min-width: 1000px) and (max-width: 1499px), screen and (min-height: 501px) and (max-height: 700px)' href="tablet.css" type="text/css" />
<link rel='stylesheet' media='screen and (max-width: 999px), screen and (max-height:500px)' href='mobile.css' type='text/css' />
  • 0
    Это может показаться глупым вопросом, но какова ваша цель в загрузке различных CSS в зависимости от высоты окна? Я думаю, ширина будет делать все, что вам нужно.
  • 0
    Ширина, похоже, проблема на Galaxy S4, на котором я тестирую, она также портит мой макет, когда ширина максимальная, но высота меньше 700px. Для справки здесь есть страница: danhufc.com/gaming
Теги:
media-queries

2 ответа

2

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

Например width = 1200px и height = 400px будут загружать tablet.css (из-за ширины) и mobile.css(bacause of height). Наверное, это не то, что ты хочешь. Таким образом, вы должны учитывать эти взаимодействия при создании правил CSS.

Во всяком случае, наиболее отзывчивые веб-сайты CSS просто смотрят на ширину, чтобы установить соответствующие правила.

Например, посмотрите, как Bootstrap создает свою гибкую сетчатую систему: http://getbootstrap.com/css/#grid

Поделиться
  • 1
    Похоже, я борюсь с неудачами с помощью кода, который я использовал, думаю, я удалю его и вместо этого добавлю несколько запросов в файл CSS. Благодарю.
1

Вы можете добавить медиа-запросы непосредственно в css. Затем вы можете внести изменения в соответствии с тем, какие элементы вы хотите изменить стиль при разных размерах экрана.

Вы можете просто сделать:

 @media all and (min-width: 1500px) and (min-height: 701px) {
  // Add the styling for the elements you want to respond to the screen change
 }

Надеюсь, это поможет!

Поделиться
  • 1
    Спасибо за ответ, и я пойду по этому маршруту, мне понравилась идея отдельных таблиц стилей, но это делало жизнь слишком сложной.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню