Адаптивный веб дизайн — Медиа запросы — Учебник CSS — Schoolsw3.com
❮ Назад Далее ❯
Что такое медиа запрос?
Медиа запрос — это CSS исполнение, представленный в CSS3.
Используется правило @media для включения блока свойств CSS, только если определенно условие true.
Пример
Если окно браузера 600 пикселей или меньше, цвет фона будет светло-голубым:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Попробуйте сами »
Добавление точки прерывания
Ранее в этом уроке мы сделали веб страницу со строками и столбцами, отзывчивым, но на маленьком экране он выглядел плохо.
В этом могут помочь медиа запросы. Мы можем добавить точку прерывания, где определенные части дизайна будут вести себя по-разному на каждой сетке точки прерывания.
Компьютер
Телефон
Использовать медиа-запрос, чтобы добавить точку прерывания на 768 пикселей:
Пример
Когда экран (окно браузера) становится меньше, чем 768 пикселей, каждый столбец должен иметь ширину 100 процентов:
/* Для настольных компьютеров: */
.
col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* Для мобильных телефонов: */
[class*=»col-«] {
width: 100%;
}
}
Попробуйте сами »
Всегда первый мобильный дизайн
Мобильный в первую очередь означает дизайн для мобильных устройств до настольного компьютера или любых других устройств (это ускорит отображение страницы на небольших устройствах).
Это означает, что мы должны внести некоторые изменения в CSS.
Вместо изменения стилей, когда ширина становится меньше, чем
768 пикселей, мы должны изменить конструкцию когда ширина получает большле чем
768 пикселей.
Это сделает наш мобильны дизайн первым:
Пример
/* Для мобильных телефонов: */
[class*=»col-«] {
width: 100%;
@media only screen and (min-width: 768px) {
/* Для настольных компьютеров: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Попробуйте сами »
Еще одна точка прерывания
Можно добавить любое количество точек прерывания.
Мы также вставим точку прерывания между планшетами и мобильными телефонами.
Компьютер
Планшет
Телефон
Мы делаем это, добавляя еще один медиа запрос (600px) и набор новых классов для устройств, размер которых превышает 600 пикселей (но меньше, чем 768 пикселей):
Пример
Обратите внимание, что два набора классов почти идентичны, только
разница в названии (col- и col-s-):
/* Для мобильных телефонов: */
[class*=»col-«] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Для планшетов: */
.
col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* Для настольных компьютеров: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Может показаться странным, что у нас есть два набора одинаковых классов, но это дает нам перспективу в HTML, чтобы решить, что будет происходить со столбцами в каждом точка прерывания:
Пример HTML
Для компьютеров:
Первый и третий раздел будет охватывать каждые 3 столбца.
Средняя часть будет охватывать 6 столбцов.
Для планшетов:
Первый раздел будет охватывать 3 столбца, второй — 9, и третий раздел будет отображаться ниже первых двух разделов, и он будет охватывать 12 столбцов:
<div>
<div>…</div>
<div>…</div>
</div>
Попробуйте сами »
Типичные устройства точка прерывания
Есть много экранов и устройств с разной высотой и шириной, поэтому трудно создать точную точку прерывания для каждого устройства. Для простоты можно ориентироваться на пять групп:
Пример
/* Очень маленькие устройства (телефоны, 600px и ниже) */
@media only screen and (max-width: 600px) {…}
/* Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше)
*/
@media only screen and (min-width: 600px) {…}
/* Средние устройства (альбомные планшеты, 768px и выше) */
@media only screen and (min-width: 768px) {.
..}
/* Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) */
@media only screen and (min-width: 992px) {…}
/* Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px) {…}
Попробуйте сами »
Ориентация: Книжная/Альбомная
Медиа запросы также могут быть использованы для изменения формата страницы в зависимости от ориентация браузера.
Вы можете иметь набор свойств CSS, которые будут применятся, когда окно браузера шире, чем его высота, так называемый «Альбомная» ориентация:
Пример
Веб страница будет иметь светло-голубой фон, если ориентация в альбомном режиме:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Попробуйте сами »
Скрыть элементы с помощью медиа запросов
Другим распространенным использованием медиа запросов является скрытие элементов на экранах разного размера:
Я буду прятаться на маленьких экранах.
Пример
/* Если размер экрана 600 пикселей в ширину или меньше, скройте элемент */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Попробуйте сами »
Изменение размера шрифта с помощью медиа запросов
Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экранов:
Пример
/* Если размер экрана 601px или кроме того, установите размер шрифта <div> в 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* Если размер экрана 600px или менее, установите размер шрифта <div> в 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
Попробуйте сами »
CSS Справочник @media
Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите
@media правило в нашем справочнике CSS.
❮ Назад Далее ❯
Медиа запросы (media query) в CSS3
В современном мире, сайты можно просматривать не только через обычные настольные компьютеры и ноутбуки, но и с помощью — планшетов, смартфонов, нетбуков, сотовых телефонов, которые имеют более низкое разрешение экрана.
Обычные сайты с фиксированными размерами, не могут хорошо просматриваться на всех устройствах одновременно:
1) для большинства мобильных устройств стандартная ширина сайта в 1000 пикселей будет больше размера экрана, так как есть сотовые телефоны с размером экрана в 200 пикселей.
2) а если сделать сайт с шириной в 200 пикселей, то такой сайт будет практический не виден на обычных настольных компьютерах и ноутбуках.
Что делать?
Лучшим выходом из этой дилеммы будет применение медиа запросов (media query).
Что такое медиа запросы (media query)?
Для начала перейдите по ссылке медиа запросы и попробуйте изменить размер экрана браузера от 400 пикселей до 800 пикселей (конечно если есть такая возможность).
В этом примере цвет бокса будет менять в зависимости от размера экрана. Это осуществляется с помощью медиа запросов.
Код этого примера довольно простой!
index.html:<!doctype html><html><head><link rel="stylesheet" type="text/css" media="all" href="style.css" /></head><body><div></div></body></html>
style.css:#box {
width: 100%;height: 50px;background: green;}@media only screen and (max-width:700px){#box {background: yellow;}}
@media only screen and (max-width:500px){#box {background: black;}}
Синтаксис медиа запросов довольно простой, запись:@media only screen and (max-width:700px){#box {background: yellow;}}
означает что для всех размеров экрана меньше 700 пикселей, бокс с div будет иметь желтый фон.
Отметим что вместо background: yellow;
div, например сделать высоту бокса равную 100 пикселей: height: 100px;Запись:
@media only screen and (max-width:500px){#box {background: black;}}делает фон бокса, для размера экранов менее 500 пикселей, черного цвета.
Замечание о приоритетах медиа запросов
В этом примере есть две друг другу противоречащие записи, в @media only screen and (max-width:700px) цвет бокса установили желтым, а в @media only screen and (max-width:500px) цвет бокса черный.
Для размеров экрана менее 500 пикселей, например для 400 пикселей должны действовать оба стиля, но если есть стили противоречащие друг другу, то стиль с меньшим max-width будет более приоритетным, в данном случае это @media only screen and (max-width:500px).
Любые размеры экрана
В записях типа @media only screen and (max-width:500px) можно вместо 500 ставить любые значения. Также возможно давать внутри медиа запросов стили не только для одного div, но и для нескольких:@media only screen and (max-width:500px){#one {background: black;}#two {background: black;}...}
OBS.Live поддерживает медиа-запросы для увеличения вовлеченности зрителей и увеличения доходов | by Adam Yosilewitz
Надстройка StreamElements OBS.Live для OBS Studio — это самый простой способ управления потоком с минимальной загрузкой ЦП. Теперь OBS.Live интегрирует нашу функцию медиа-запросов, что позволяет увеличить взаимодействие со зрителями и внутри OBS.
Взаимодействие со зрителями — одна из лучших вещей в потоковом вещании. Ваши зрители могут давать вам советы, публиковать сообщения в чате, полные мемов и эмоций, и отправлять вам биты.
Функции взаимодействия со зрителями StreamElements, такие как система лояльности и игровые модули ChatBot (например, бинго, дуэль и рулетка), помогут вам увеличить это взаимодействие.
Media Request позволяет перейти на новый уровень.
OBS.Live с Media Request, вы можете переупорядочивать вкладки по своему вкусу предложения дополнения.Благодаря функции запроса мультимедиа OBS.Live ваши зрители теперь могут попросить вас воспроизвести их любимые песни или видео на YouTube. Вы можете управлять всеми этими запросами непосредственно из OBS.Live, включая приостановку запросов, включение/отключение возможности запрашивать медиафайлы или удаление запрошенного видео с экрана (вы можете увидеть эти параметры ниже). Кроме того, с новой интеграцией Elgato Stream Deck вы можете выполнять любое из этих действий, нажимая клавишу.
Смотрите, как Sweet_Anita развлекается с помощью Media Request Это поможет повысить вовлеченность, поскольку ваши зрители могут оказывать реальное влияние на вашу трансляцию и транслируемый в ней контент.
Это также позволяет им делиться своими любимыми медиафайлами со своим любимым стримером (это вы!)
И, если этого недостаточно, функция StreamElements Media Request даже помогает вам увеличить свой доход. Если вы включите «Через подсказку» в меню настроек «Запросы мультимедиа», это добавит раздел на вашу страницу подсказки, где зрители могут добавить URL-адрес видео, которое они хотели бы, чтобы вы воспроизвели.
Вы можете установить посекундное воспроизведение мультимедиа, что даст зрителям дополнительный стимул давать вам чаевые в больших количествах. Эта функция уже используется такими стримерами, как sodapoppin, Trainwreckstv и greekgod, чтобы максимизировать деньги, которые они зарабатывают на своих стримах.
Включить запросы мультимедиа в потоке очень просто. Вот очень простая пошаговая инструкция, чтобы включить эту функцию из OBS.Live:
- Откройте OBS.Live (убедитесь, что он обновлен до последней версии, после входа в систему есть средство автоматического обновления).
- Если вы уже используете Media Request через нашу панель инструментов, значит, он уже включен в OBS.Live с теми же функциями, с которыми вы уже знакомы.
- Если вы новичок в Media Request, с правой стороны нажмите «Посмотреть», чтобы настроить OBS.Live.
- Следуйте пошаговому руководству (добавьте видео в свой плейлист > включите виджет Media Request > выберите, как вы хотите принимать Media Requests из видео > нажмите «Активировать запросы аудитории»).
Важно! Чтобы использовать медиазапрос, необходимо добавить виджет медиазапроса в оверлей. Ваши наложения находятся в разделе «Мои наложения» на панели инструментов StreamElements. Чтобы добавить виджет, щелкните значок «Изменить».
Мои наложения > Редактировать > Виджеты > Добавить общий доступ к мультимедиа Всеми настройками запроса мультимедиа можно управлять из меню запроса мультимедиа в StreamElements, и каждое изменение в настройках влияет на другое. Полное руководство, включающее все настройки, можно найти в нашем блоге Media Request.
Мы перечислили основные настройки ниже, чтобы помочь вам начать работу:
- Запросы зрителей вкл/выкл: Включение этого параметра позволит вашим зрителям запрашивать медиафайлы с помощью команды чата !SR или вашей всплывающей страницы, если вы включили Запросы медиа через подсказки.
- Включение/выключение видео: Включение этого параметра будет отображать медиафайлы на вашем оверлее, а его выключение ограничит ссылку на YouTube только аудио.
- Показать в потоке: Эта кнопка является «выключателем» на случай, если вы больше не хотите, чтобы видео воспроизводилось в вашем потоке. Нажатие на нее удалит видео из вашего оверлея и отобразит его на аудиоплеере (аудио по-прежнему будет воспроизводиться).
- Запретить зрителя / Запретить дорожку / Запретить пользователя и дорожку / Удалить дорожку из очереди: Нажмите на дорожку, чтобы включить блокировку запросившего ее зрителя, самой дорожки, обоих или удалить ее из очереди.
- Очередь модерации: Находится в меню «Настройки». Включение этой функции потребует одобрения каждого запроса вами или вашими модами перед входом в плейлист.
- Горячие клавиши запроса мультимедиа: установите предпочитаемые клавиши для воспроизведения/паузы, пропуска, показа/скрытия видео, увеличения громкости и уменьшения громкости.
Когда вы настраиваете медиа-запросы через OBS.Live, лимит вашей очереди, максимальная продолжительность запроса и стоимость в секунду уже настроены для вас, их также можно изменить в меню «Настройки». Существуют дополнительные настройки, с которыми вы можете поиграть, помогая вам убедиться, что ваша трансляция и медиафайлы, которые вы транслируете, интересны и подходят для вашей аудитории.
Интегрированные медиа-запросы — не единственная причина получить OBS.Live. Вот некоторые другие замечательные функции, которые мы включили, чтобы сделать OBS.Live самым простым инструментом управления трансляциями.
- Интеграция с Twitch и StreamElements: Все ваши любимые инструменты для потоковой передачи интегрированы в OBS.Live! Это включает в себя ChatBot StreamElements и Tipping.
- Лента активности и чат: OBS.Live позволяет размещать ленту активности и чат прямо в OBS Studio, устраняя необходимость держать открытыми множество окон.
- Управляйте своими оповещениями: Приостанавливайте, отключайте звук и пропускайте оповещения одним щелчком мыши!
- Отображение списков лидеров: Продемонстрируйте, кто является крупным чаевым, способствуя здоровой конкуренции среди зрителей и повышая вашу вовлеченность и статистику доходов.
- Пользовательский чат-бот: Придайте боту модерации вашего канала немного индивидуальности, создав собственное имя. Перейдите в меню «Настройки трансляции», чтобы изменить имя вашего бота (щелкните три строки рядом с «Лентой активности» > «Настройки трансляции» > Используйте раскрывающиеся меню, чтобы задать собственное имя бота).
- Горячие клавиши: Получите быстрый доступ к наиболее часто используемым функциям OBS.Live с помощью горячих клавиш. Перейдите в меню «Настройки потоковой передачи», чтобы установить горячие клавиши (щелкните три строки рядом с «Лентой активности» > «Настройки потоковой передачи» > «Горячие клавиши»). Они доступны в дополнение к настройкам горячих клавиш OBS Studio по умолчанию.
Присоединяйтесь к каналу StreamElements в Discord и поделитесь своими мыслями и отзывами об OBS.Live и функции Media Requests. Сотрудники StreamElements всегда готовы предоставить вам нашу легендарную поддержку 24/7, а дружелюбные лица из сообщества пользователей StreamElements всегда рады помочь ответить на вопросы и дать совет.
Приятной трансляции! 🙂
Зачем отвечать на запрос журналистов СМИ? | Деловые советы
Многие компании спрашивают нас, почему они должны отвечать на запросы СМИ. Каковы преимущества? И почему это поможет их усилиям по связям с общественностью? Это связано с тем, что, когда люди думают о PR, они часто думают только о написании пресс-релизов.
Многие люди, включая маркетологов, даже думают, что PR означает «пресс-релиз», когда на самом деле это означает «связи с общественностью».
Несмотря на то, что пресс-релизы являются важной частью PR, это еще не все. Владельцам бизнеса, у которых мало времени и опыта в области PR, может быть трудно придумать достойные освещения идеи, представить их журналистам или даже написать пресс-релиз. Однако, если они все еще хотят получить рекламу в СМИ, запросы — идеальный инструмент, который поможет им на этом пути.
Запросы СМИ — это единственный случай, когда журналист действительно хочет услышать от вас, и это идеальное время, чтобы связаться с ним. От поиска #journorequest в Твиттере до регистрации в службе медиа-запросов — медиа-запросы предлагают возможности для пиара на тарелке.
Ниже мы перечислили 4 причины, по которым стоит ответить на запрос журналистов.
Читайте также: Как использовать JournoLink для улучшения вашего PR
1.
Ответьте через несколько минут
Многие владельцы бизнеса ставят PR в конец списка, потому что у них нет времени. Однако для ответа на запрос СМИ требуется всего несколько минут. Ответ не должен состоять из нескольких предложений и уж точно не должен быть больше обычного пресс-релиза.
Все, что вам нужно включить, это одно или два предложения о вашем бизнесе и о том, чем он занимается. Затем следует короткий абзац о том, почему вы имеете отношение к запросу. Закончили с вашей контактной информацией и когда вы доступны. Один из ключевых советов при ответе на запрос — сделать его кратким и приятным, а это означает, что это не займет у вас совсем много времени.
Кроме того, есть компании, в том числе JournoLink, которые отправляют медиа-запросы прямо на ваш почтовый ящик. Это означает, что вам не нужно тратить время на поиск релевантных запросов в Twitter. Вы можете получить электронное письмо, проверить его актуальность и ответить практически мгновенно, не отвлекаясь от ведения бизнеса.
2. История уже достойна достойности
Фраза «достойна достойности», когда она доходит до PR. Журналисты ищут «достойные освещения в печати» истории, истории, о которых люди хотят читать в данный конкретный момент времени.
Теперь, когда почти у всех компаний есть новости или деловые новости, которыми они могут поделиться, владельцу бизнеса может быть трудно выбрать правильную историю и представить ее в нужное время. Тем не менее, когда дело доходит до запросов СМИ, история уже есть, а это означает, что вам нужно только решить, имеет ли она отношение к вам и вашему бизнесу. Это, опять же, не только экономит ваше время, но и избавляет от необходимости искать идеальную историю, когда вы думаете о своих усилиях по связям с общественностью.
Кроме того, запросы СМИ дают вам примеры того, что заслуживает освещения в печати. Например, если вы видите редакционные запросы о комментариях к последнему Осеннему заявлению, вы знаете, что журналисты хотят обсудить эту историю. Поэтому, когда появится весенний бюджет или следующее осеннее заявление, вы сможете лучше подготовиться к своему PR, а это означает, что со временем вы сможете распознать, что заслуживает освещения в печати, и применить это к своему PR-плану.
3. Выстраивайте отношения с журналистами
Питчинг журналисту, с которым у вас ранее не было контактов, часто может привести к тому, что журналист пропустит или проигнорирует электронное письмо. Для сравнения, когда вы ранее разговаривали с журналистом, и он знает о вашем бизнесе, ваша презентация, скорее всего, будет подхвачена.
Отвечая на запрос СМИ, вы помогаете журналистам найти то, что им нужно. И независимо от того, будет ли использован ваш комментарий, это все равно первоначальная помолвка, чтобы начать отношения с этим журналистом. Это означает, что они знают, кто вы, и могут рассмотреть вас для будущих статей или функций.
Кроме того, это упрощает обращение к журналисту в будущем, поскольку вы можете сослаться на свое предыдущее взаимодействие. Например, вы можете начать электронное письмо со слов «Спасибо, что рассказали о моем бизнесе в вашей статье, касающейся…» или «Я уже говорил с вами по поводу вашего медиа-запроса на…». Это оживит память журналиста, а значит, он с большей вероятностью продолжит чтение.
Читайте также: Как создать и развивать отношения с журналистом
4. Получите освещение, о котором вы никогда не думали
Службы запросов СМИ и #journorequest в Твиттере используются целым рядом журналистов, работающих в различных изданиях, от BBC до региональных газет и глянцевых журналов для торговых СМИ. Таким образом, вы можете получить освещение в публикациях, о которых раньше не думали, потому что считали их слишком большими, маленькими или просто не слышали о них раньше. Тем не менее, у них может быть идеальная целевая аудитория для вашего бизнеса.
Также важно отметить, что медиа-запросы используются не только журналистами, но и блоггерами, влиятельными лицами и создателями контента, с которыми одинаково важно связаться при рассмотрении плана PR вашего бизнеса и охвата вашей целевой аудитории.