Відповіді:
За допомогою коми вкажіть два (або більше) різних правил:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
З https://developer.mozilla.org/en/CSS/Media_queries/
... Крім того, ви можете комбінувати декілька медіа-запитів у списку, розділеному комами; якщо будь-який із медіа-запитів у списку є істинним, застосовується відповідна таблиця стилів. Це еквівалент логічної операції "чи".
Швидка відповідь.
Окремі правила з комами:
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Довга відповідь.
Тут багато, але я намагався зробити її інформацією густою, а не просто пухнастою написанням. Це був гарний шанс навчитися сам! Хоча знайдіть час для систематичного читання, і я сподіваюся, що це буде корисно.
Медіа-запити, по суті, використовуються у веб-дизайні для створення певного пристрою чи конкретного ситуації перегляду; це робиться за допомогою @mediaдекларації в CSS сторінки . Це може бути використано для відображення веб-сторінки по-різному за великої кількості обставин: чи перебуваєте ви на планшеті чи телевізорі з різними співвідношеннями сторін, чи ваш пристрій має кольоровий або чорно-білий екран, або, можливо, найчастіше, коли користувач змінює розмір свого веб-переглядача або перемикається між переглядаючими пристроями з різними розмірами екрана (дуже загально кажучи, такий дизайн називається чуйним веб-дизайном )
При розробці цих ситуацій, мабуть, є чотири Логічні Оператори, які можуть використовуватись для отримання більш складних комбінацій вимог при націлюванні на різні пристрої або розміри вікна перегляду .
(Примітка. Якщо ви не розумієте відмінності між правилами медіа, медіа-запитами та запитами щодо функцій, спочатку перегляньте нижній розділ цієї відповіді, щоб трохи краще ознайомитися з термінологією, пов’язаною з синтаксисом медіа-запитів
1. І ( та ключове слово)
Вимагає, щоб усі умови, визначені, повинні бути виконані до того, як набудуть чинності правила стилізації.
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
Зазначені правила стилізації не вступатимуть у дію, якщо всі наведені нижче умови не оцінять як істинні:
Примітка. Я вважаю, що ці три запити, що використовуються разом, складають єдиний медіа-запит .
2. АБО ( списки, розділені комами )
Замість чи ключового слова списки, розділені комами, використовуються для з'єднання кількох медіа-запитів разом для формування більш складного правила медіа
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Зазначені правила стилізації набудуть чинності, коли будь-який медіа-запит буде оцінено як істинний :
3. НЕ ( не ключове слово)
Чи не ключове слово може бути використано для заперечення одного запиту засобів масової інформації (а не повні ЗМІ правити --meaning , що це тільки зводить на немає записів між набором ком і не повні ЗМІ панувати після оголошення @media).
Аналогічно зауважте, що ключове слово , яке не заперечує медіа-запити, не може бути використане для заперечення індивідуального запиту щодо функцій у медіа-запиті. *
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
Стилі, вказані тут, набудуть чинності, якщо
Іншими словами, якщо тип носія - "екран", а мінімальна роздільна здатність - 300 dpi, правило не набере чинності, якщо мінімальна ширина вікна перегляду не буде не менше 800 пікселів.
(Ключове слово, яке не є ключовим словом, може бути трохи привабливим. Назвіть мені, чи можу я зробити краще.;)
4. ТІЛЬКИ ( лише ключове слово)
Наскільки я розумію, єдине ключове слово використовується для запобігання неправильному тлумаченню нових медіа-запитів як попередньо використовуваних, вужчих типів медіа. При правильному використанні, старші / несумісні браузери повинні просто ігнорувати стилізацію.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Старіший / невідповідний браузер просто ігнорує цей рядок коду, я вважаю, що він буде читати єдине ключове слово і вважати його неправильним типом медіа . (Дивіться тут і тут для отримання додаткової інформації від розумніших людей)
ДЛЯ БІЛЬШЕ ІНФОРМАЦІЇ
Для отримання додаткової інформації (включаючи додаткові функції , які можуть бути запитані), см: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
Примітка. Мені потрібно було вивчити наступну термінологію, щоб усе тут було сенсом, особливо стосовно ключового слова не Ось як я це розумію:
ЗМІ правило (MDN також , здається, називає ці заяви ЗМІ) включає в себе термін @mediaз усіма наслідками, що випливають запитами ЗМІ
@media all and (min-width: 800px)
@media only screen and (max-resolution:800dpi), not print
@media screen and (min-width: 700px), (orientation: landscape)
@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)
ЗМІ запит являє собою набір художніх запитів. Вони можуть бути такими ж простими, як один запит для функцій, або вони можуть використовувати ключове слово та ключове слово для формування більш складного запиту. Медіа-запити можна розділити комами, щоб сформувати більш складні правила медіа (див. Ключове слово або ключове слово вище).
screen (Примітка. Тут використовується лише один запит на функції.)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
НЕ handheld, (min-width: 650px). (Зверніть увагу на коми: тут є два медіа-запити.)
Функція запит є самою основною частиною ЗМІ правила і просто відноситься певна особливість і свій статус в даній переглядається ситуації.
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Фрагменти коду та інформація, отримана з:
CSS-медіа-запити від Mozilla Contributors (ліцензовано за CC-BY-SA 2.5 ). Деякі зразки коду були використані з незначними змінами, щоб (сподіваємось) збільшити ясність пояснення.
Є два способи написання належних медіа-запитів у css. Якщо ви пишете медіа-запити спочатку на більший пристрій, то правильним способом написання буде:
@media only screen
and (min-width : 415px){
/* Styles */
}
@media only screen
and (min-width : 769px){
/* Styles */
}
@media only screen
and (min-width : 992px){
/* Styles */
}Але якщо ви спочатку пишете медіа-запити для менших пристроїв, це буде щось на зразок:
@media only screen
and (max-width : 991px){
/* Styles */
}
@media only screen
and (max-width : 768px){
/* Styles */
}
@media only screen
and (max-width : 414px){
/* Styles */
}