@media print {
  header, footer, aside, form,… {
    дисплей: нет;
  }
  статья {
    ширина: 100%! важно;
    заполнение: 0! важно;
    маржа: 0! важно;
  }
}
  

Шаг 3. Настройка полей страницы

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

Тогда наш код станет:

  @media print {
  header, footer, aside, form,… {
    дисплей: нет;
  }
  статья {
    ширина: 100%! важно;
    заполнение: 0! важно;
    маржа: 0! важно;
  }
}
@страница {
  запас: 2см;
}
  

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

  @page: first {
    запас: 0см;
}
@page: last {
    запас: 5см;
}
@page: left {
    запас: 2см 1,5см 2см 2см;
}
@page: right {
    запас: 2см 2см 2см 1,5см;
}
  

Шаг 4: Обработка ссылок

Ссылки по-прежнему доступны в PDF-файлах, но для тех пользователей, которые могут захотеть физически удерживать контент, нам нужно придумать что-то более творческое.Именно Бен Фрейн впервые рассказал мне об этом действительно простом, супер-крутом трюке .

  @media print {
  a: after {
    содержание: "(" attr (href) ")";
  }
}
  

При этом значение атрибута href отображается в скобках после ссылки, например:

классный трюк (https://benfrain.com/create-print-styles-using -css3-media-query)

———

Я оставлю вас с последним советом: оставьте что-нибудь в версии для печати, где есть ваше имя и необходимая информация об авторских правах!

Sympli — это Saas-компания, которая создает инструменты для совместной разработки, передачи обслуживания и контроля версий.За более чем 5 лет работы на рынке мы помогли тысячам дизайнеров и разработчиков работать вместе, предоставив единый источник правды и сократив обмен информацией, что привело к более быстрой доставке.

Как добавить пользовательские медиа-запросы CSS в Divi для повышения адаптивности вашего сайта

Из этого туториала Вы узнаете, как добавить пользовательские медиа-запросы CSS в Divi, чтобы сделать ваш сайт адаптивным на устройствах любого размера.

Узнайте о медиа-запросах в Divi

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

Присоединяйтесь к подписчикам на нашем канале YouTube и наслаждайтесь другими видеоуроками Divi!

Что такое медиа-запросы?

Медиа-запрос — это функция HTML / CSS, которая позволяет содержимому веб-страницы адаптироваться к типу визуализируемого мультимедиа, например к экрану компьютера, телефона или планшета.Медиа-запросы — это, по сути, способ разделить CSS по типу мультимедиа, чтобы использовать его для определенных целей. В случае, если речь идет о ширине.

В CSS за типом мультимедиа обычно следует мультимедийная функция, которой в данном случае будет ширина устройства. Медиа-функции не являются обязательными в медиа-запросах. По сути, это изменит взаимодействие с пользователем в зависимости от поведения и функций пользователя и устройства вывода. Некоторые часто используемые мультимедийные функции упомянуты ниже.

• Ориентация
• Разрешение
• Соотношение сторон
• Ширина
• Высота

В этом руководстве мы сосредоточимся на ширине , наиболее распространенном медиа-запросе.

Ширина области просмотра и разрешение экрана

Обратите внимание, что ширина, о которой мы говорим, — это не разрешение экрана устройства, а, скорее, ширина области просмотра. Например, смартфон Pixel 4 имеет разрешение 1080 x 2280, а область просмотра — 411 x 869. Если вы использовали наш новый плагин Divi Responsive Helper , вы можете установить размер предварительного просмотра на 411 пикселей, чтобы протестировать адаптивный дизайн веб-сайта. для пользователей Pixel 4.

Понимание точек останова CSS в Divi

Что такое точка останова CSS?

Еще один способ обращения к медиа-запросам — это термин «точка останова», поскольку точки останова определяются медиа-запросами.Медиа-запрос сообщает браузеру, как отображать контент, если он соответствует определенным критериям.

Точки останова CSS — это определенные точки в коде веб-сайта, где содержимое изменяется или реагирует в зависимости от ширины устройства. Наличие нескольких точек останова позволяет вам показать пользователю наилучший макет для устройств разных размеров.

Точки останова по умолчанию в Divi

По умолчанию Divi поставляется с тремя основными точками останова, которые жестко прописаны в теме. Эти три встроенных точки останова Divi представлены тремя разными устройствами: настольным компьютером, ноутбуком и телефоном.Мы можем представить себе устройство в очень общем виде, и именно так была создана Divi.

В Divi точные размеры для этих точек останова (которые определяются медиа-запросами, встроенными в Divi): Desktop (выше 981 пикселей), Tablet (980px — 768 пикселей) и Phone (767 пикселей и ниже).

Как вы, вероятно, знаете, если вы наведете курсор на любой параметр в Divi, вы увидите значок телефона, который открывает эти отзывчивые точки останова в виде вкладок.

Когда вы настраиваете параметры для каждого устройства, полезно рассматривать эти вкладки как три группы настроек: одна группа настроек для рабочего стола, другая группа настроек для планшета и другая группа настроек для телефона.

Используя эти три вкладки, вы можете сделать любые настройки вашего веб-сайта адаптивными в Visual Builder. А как насчет тех случаев, когда их недостаточно?

Использование пользовательских медиа-запросов CSS в Divi

Начните с правила @media

Каждый медиа-запрос начинается с правила @media , которое используется для применения фрагмента кода к определенному типу медиа, которым, опять же, в нашем случае является ширина области просмотра устройства.

Назначьте ширину устройства

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

Итак, вот простая разбивка того, что они означают:

min-width = шире этого размера

max-width = меньше этого размера

Попытайтесь запомнить это, потому что это очень поможет вам, когда вы войдете в более сложные правила с включенными min-width и max-width.

Добавить набор правил CSS

Теперь вы можете продолжить и добавить CSS как обычно. Помещая это внутри медиа-запроса, мы разделяем этот CSS-фрагмент, чтобы он применялся только к этим критериям.

Этот медиа-запрос заявляет, что правило CSS внутри него должно вступить в силу при минимальном размере экрана 980 пикселей в ширину и выше.

Пример

Теперь пример того, что мы описываем. Допустим, вы хотели изменить размер шрифта текста заголовка h2 на 48 пикселей на экранах настольных компьютеров, ширина которых превышает 980 пикселей.Вы можете использовать такой медиа-запрос:

  @media (минимальная ширина: 980 пикселей) { 

После установки правила и условия @media вы можете включить вложенный CSS в скобки, который будет применяться только для этого медиа-запроса. В нашем примере мы хотим настроить таргетинг на размер текста заголовка h2 в модуле Divi Text, чтобы мы могли сделать что-то вроде этого:

  .et_pb_text h2 {
размер шрифта: 48 пикселей;
}  

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

  @media (min-width: 980px) {
.et_pb_text h2 {
размер шрифта: 48 пикселей;
}
}  

Обратите внимание, что в конце всегда есть две фигурные скобки. Один для последнего свойства css внутри и тот, который закрывает медиа-запрос.

Добавление дополнительных условий

Мы также можем добавить дополнительные условия.Допустим, вы хотите, чтобы эффект имел место между двумя ширинами . Мы бы использовали что-то вроде этого:

  @media (min-width: 420px) and (max-width: 600px) {
.et_pb_text h2 {
размер шрифта: 36 пикселей;
}
}  

Здесь вы можете видеть, что все, что мы сделали, это добавили «и» , а затем добавили еще один набор критериев. В этом случае CSS будет влиять только на экраны между двумя перечисленными размерами, от 420 пикселей до 600 пикселей.

Определение размера экрана

Чтобы найти ширину, необходимую для нашего медиа-запроса, у нас есть несколько вариантов.

Использование инструментов браузера

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

ПРИМЕЧАНИЕ: В ближайшее время мы планируем сделать руководство по использованию инструмента проверки!

Используйте наш плагин

Или, если вы хотите точно настроить предварительный просмотр непосредственно в Divi Visual Builder, вы можете использовать наш подключаемый модуль Divi Responsive Helper .

В любом случае нам нужно найти размер пикселя и поместить его в медиа-запрос.

Куда писать медиа-запрос CSS

У нас есть очень подробное руководство по Куда добавить пользовательский код в Divi , которое вам обязательно стоит проверить. В нашем случае мы пишем медиа-запросы CSS, поэтому вы должны поместить этот код в поле «Пользовательский CSS» для параметров темы Divi или, если у вас есть дочерняя тема, поместите ее туда в своем стиле.css файл.

Сделай это с настройкой!

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

Примеры медиа-запросов CSS в других наших руководствах по Divi

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

Остановить модуль меню от перекрытия двух строк

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

Изменить отзывчивую точку останова модуля меню

В этом уроке мы проделали трюк с max-width, заставив мобильное меню отображаться шире, чем 980 пикселей по умолчанию, и вместо этого изменили его на 1149 пикселей.У нас есть две части CSS: одна для увеличения размера мобильного меню, а вторая — для того, чтобы меню рабочего стола оставалось скрытым до тех пор, пока не будет достигнут более широкий размер.

Показать меню гамбургеров на рабочем столе (+ Vise Versa)

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

У нас также есть вторая часть, где мы делаем обратное и скрываем мобильное меню ниже 980 пикселей и вместо этого показываем там меню рабочего стола.

Последнее обновление 25 окт.2021 в 13:52

Вот и все!

Каждый месяц мы рассылаем сводный информационный бюллетень по электронной почте с последними учебными материалами, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями.Иногда мы отправляем дополнительные отдельные электронные письма здесь и там, если нам просто не терпится! Вот что вы получите, если подпишетесь, и вы всегда можете отказаться от подписки в любое время, если просто не можете больше это терпеть 🙂

Нельсон — владелец компании Pee-Aye Creative Co в прекрасном штате Пенсильвания. Он любит помогать малому бизнесу, исследовать, создавать веб-сайты с Divi и обучать других.

Оставить отзыв!

Комментируя, вы соглашаетесь с нашей Политикой в ​​отношении комментариев для блогов и YouTube.

Каждый месяц мы рассылаем сводный информационный бюллетень по электронной почте с последними учебными материалами, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями.Иногда мы отправляем дополнительные отдельные электронные письма здесь и там, если нам просто не терпится! Вот что вы получите, если подпишетесь, и вы всегда можете отказаться от подписки в любое время, если просто не можете больше это терпеть 🙂



У нашего видео есть просмотры! Присоединяйтесь к подписчикам и наслаждайтесь видео-уроками!

Посетите наш канал

{«id»: null, «mode»: «button», «open_style»: «in_modal», «currency_code»: «USD», «currency_symbol»: «$», «currency_type»: «decimal», «blank_flag_url» «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /blank.gif «,» flag_sprite_url «:» https: \ / \ / www.peeayecreative .com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /flags.png «,» default_amount «: 500,» top_media_type «:» none «,» Feature_image_url «: false,» Feature_embed «:» «,» header_media «: null,» file_download_attachment_data «: null,» recurring_options_enabled «: true,» recurring_options «: {» never «: {» selected «: true,» after_output «: «Только один раз»}, «еженедельно»: {«selected»: false, «after_output»: «каждую неделю»}, «ежемесячно»: {«selected»: false, «after_output»: «каждый месяц»}, » ежегодно «: {» selected «: false,» after_output «:» Каждый год «}},» strings «: {» current_user_email «:» «,» current_user_name «:» «,» link_text «:» Оставить отзыв «, «complete_payment_button_error_text»: «Проверьте информацию и попробуйте еще раз», «payment_verb»: «Pay», «payment_request_label»: «Pee-Aye Creative», «form_has_an_error»: «Пожалуйста, проверьте и исправьте ошибки выше», «general_server_error»: » Что-то сейчас не работает.Повторите попытку. «,» Form_title «:» Pee-Aye Creative «,» form_subtitle «: null,» currency_search_text «:» Страна или валюта здесь «,» other_payment_option «:» Другой способ оплаты «,» manage_payments_button_text «:» Управление ваши платежи «,» thank_you_message «:» Спасибо за поддержку! Неделя за неделей нас поддерживают такие люди, как вы! «,» Payment_confirmation_title «:» Pee-Aye Creative «,» Receipt_title «:» Ваша квитанция «,» print_receipt «:» Распечатать квитанцию ​​»,» email_receipt «:» Электронная почта Квитанция «,» email_receipt_sending «:» Квитанция об отправке… «,» email_receipt_success «:» Квитанция по электронной почте успешно отправлена ​​»,» email_receipt_failed «:» Не удалось отправить квитанцию ​​по электронной почте. Повторите попытку. «,» Receive_payee «:» Paid to «,» receive_statement_descriptor «:» Это будет отображаться в вашей выписке как «,» Receive_date «:» Date «,» receive_transaction_id «:» Transaction ID «,» Receaction_transaction_amount » : «Amount», «Refund_payer»: «Refund from», «login»: «Войдите, чтобы управлять своими платежами», «manage_payments»: «Manage Payments», «transaction_title»: «Your Transactions», «transaction_title»: » Квитанция транзакции «,» transaction_period «:» Период действия «,» scheme_title «:» Ваши планы «,» scheme_title «:» Управление планом «,» scheme_details «:» Сведения о плане «,» scheme_id_title «:» Идентификатор плана «,» scheme_payment_method_title «:» Способ оплаты «,» scheme_amount_title «:« Сумма плана »,« scheme_renewal_title »:« Дата следующего продления »,« scheme_action_cancel »:« Отмена плана »,« scheme_action_cant_cancel »:« Отмена в настоящее время недоступна.»,» scheme_action_cancel_double «:» Вы уверены, что хотите отменить? «,» scheme_cancelling «:» Отмена плана … «,» scheme_cancelled «:» План отменен «,» scheme_failed_to_cancel «:» Не удалось отменить план » , «back_to_plans»: «\ u2190 Вернуться к планам», «update_payment_method_verb»: «Обновить», «sca_auth_description»: «У вас есть ожидающий платеж за продление, требующий авторизации.», «sca_auth_verb»: «Авторизовать платеж за продление», «sca_authing_verb «:» Авторизация платежа «,» sca_authed_verb «:» Платеж успешно авторизован! «,» Sca_auth_failed «:» Авторизация невозможна! Пожалуйста, попробуйте еще раз.»,» login_button_text «:» Войти «,» login_form_has_an_error «:» Пожалуйста, проверьте и исправьте ошибки выше «,» uppercase_search «:» Search «,» lowercase_search «:» search «,» uppercase_page «:» Page «,» lowercase_page «:» page «,» uppercase_items «:» Items «,» lowercase_items «:» items «,» uppercase_per «:» Per «,» lowercase_per «:» per «,» uppercase_of «:» Of «,» lowercase_of » : «of», «back»: «Вернуться к планам», «zip_code_placeholder»: «Zip \ / Почтовый индекс», «download_file_button_text»: «Загрузить файл», «input_field_instructions»: {«tip_amount»: {«placeholder_text»: «Сколько бы вы хотели дать чаевых?», «Initial»: {«struction_type «:» normal «, «struction_message»: «Сколько вы хотите давать чаевые? Выбирайте любую валюту.»},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Сколько вы хотите дать чаевые? Выберите любую валюту. «},» Invalid_curency «: {«struction_type»: «error», «struction_message «:» Выберите допустимую валюту. «}},» Повторяющийся «: {» placeholder_text «:» Повторяющийся «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Как часто вы хотели бы это делать? «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Как часто вы будете хотите дать это? «},» empty «: {«struction_type»: «error», «struction_message «:» Как часто вы хотели бы это делать? «}},» name «: {» placeholder_text «:» Имя по кредитной карте «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите имя, указанное на вашей карте.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Введите имя на вашей карте. «},» пустой «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Пожалуйста введите имя на своей карточке. «}},» privacy_policy «: {» terms_title «:» Условия использования «,» terms_body «: null,» terms_show_text «:» Просмотреть условия «,» terms_hide_text «:» Скрыть условия «, «начальный»: {«тип_ инструкции»: «нормальный», «сообщение_инструкции»: «я согласен с условиями»}, «не отмечен»: {«тип_ инструкции»: «ошибка», «сообщение_инструкции»: «пожалуйста, примите условия .»},» проверено «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Я согласен с условиями. «}},» электронная почта «: {» текст-заполнителя «:» Ваш адрес электронной почты «,» начальный «: {«тип_инструкции»: «нормальный», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «пусто»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «не_адрес_почты_почты»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Убедитесь, что вы ввели действительный адрес электронной почты»} }, «note_with_tip»: {«placeholder_text»: «Ваша заметка здесь… «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Прикрепите примечание к совету (необязательно) «},» пусто «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции » : «Прикрепите примечание к совету (необязательно)»}, «not_empty_initial»: {«command_type»: «normal», «struction_message «:» Приложите примечание к совету (необязательно) «},» save «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Сохранение примечания … «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Примечание успешно сохранено! «},» ошибка «: { «тип_инструкции»: «ошибка», «сообщение_инструкции»: «Невозможно сохранить примечание примечания в это время.Повторите попытку. «}},» Email_for_login_code «: {» placeholder_text «:» Ваш адрес электронной почты «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите свой адрес электронной почты для входа. «} , «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите адрес электронной почты для входа.»}, «пустой»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите адрес электронной почты для входа. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите адрес электронной почты, чтобы войти в систему. «}},» login_code «: {» initial «: {«struction_type»: «normal», «struction_message «:» Проверьте свою электронную почту и введите код для входа.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Проверьте свою электронную почту и введите код входа. «},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «: «Проверьте свою электронную почту и введите код входа.»}, «Empty»: {«struction_type «:» error «, «struction_message»: «Проверьте свою электронную почту и введите код входа.»}}, «Stripe_all_in_one»: {» initial «: {«struction_type»: «normal», «struction_message «:» Введите здесь данные вашей кредитной карты. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите данные вашей кредитной карты здесь.»},» успех «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Введите здесь данные своей кредитной карты. «},» недопустимое_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» номер карты не является действительным номером кредитной карты. «},» invalid_expiry_month «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_expiry_year «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_cvc «: {» command_type «:» error «, «struction_message»: «Код безопасности карты недействителен.»},» неверное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Неверный номер карты. «},» неполное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» карточка номер неполный. «},» incomplete_cvc «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Код безопасности карты неполный. «},» неполное_экспири «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты неполный. «},» Incomplete_zip «: {» command_type «:» error «, «struction_message»: «Почтовый индекс карты не указан.»},» expired_card «: {» statement_type «:» error «, «struction_message»: «Срок действия карты истек.»}, «invalid_cvc»: {«struction_type «:» error «, «struction_message»: «Безопасность карты неверный код. «},» неверный_zip «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Не удалось проверить почтовый индекс карты. «},» недействительный_expiry_year_past «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты истек «},» card_declined «: {«struction_type»: «error», «struction_message «:» Карта отклонена.»},» Отсутствует «: {» Тип_инструкции «:» ошибка «,» Сообщение_инструкции «:» У клиента нет карты, с которой производится оплата. «},» Ошибка_обработки «: {» Тип_инструкции «:» ошибка «,» инструкция_message «:» Произошла ошибка при обработке карты. «},» invalid_request_error «: {» statement_type «:» error «, «struction_message»: «Невозможно обработать этот платеж, попробуйте еще раз или используйте альтернативный метод.»}, «invalid_sofort_country»: {«struction_type «:» error «, «struction_message»: «SOFORT не принимает страну выставления счета.Попробуйте другую страну. «}}}},» Fetched_oembed_html «: false}

{» date_format «:» F j, Y «,» time_format «:» g: ia «,» wordpress_permalink_only «:» https: \ / \ /www.peeayecreative.com \ / how-to-add-custom-css-media-questions-to-divi-for-make-your-site-responsive \ / «,» all_default_visual_states «:» наследовать «,» modal_visual_state «ложь» user_is_logged_in «ложь» stripe_api_key «:» pk_live_51EARn4E3j6GcARDR3oo6L91XPb3rfnNl9j6ieomgjlZjVvj7nCzKCTphxwu38s20syRaBKveuT5NFmm4fZqUHOPe00fugbEkRD » «stripe_account_country_code»: «США», «setup_link»:» HTTPS: \ / \ / WWW.peeayecreative.com \ / wp-admin \ /admin.php? page = tip-jar-wp & mpwpadmin1 = welcome & mpwpadmin_lightbox = do_wizard_health_check «,» close_button_url «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / плагины \ / tip-jar-wp \ / \ / assets \ / images \ /closebtn.png «}

Понимание медиа-запросов CSS. Это не должно быть глубоким погружением… | Джареда Ютси | ngconf

Это не предназначено для глубокого погружения в медиа-запросы, а представляет собой учебник, который поможет понять некоторые распространенные способы использования медиа-запросов в качестве веб-разработчиков.

Медиа-запрос — это фрагмент CSS, который определяет правила о том, когда применять набор определений CSS. Он всегда начинается с

@media

Как веб-разработчики, нас больше всего интересует экран в качестве визуализированного вывода, поэтому почти всегда мы следуем @media с

screen

screen означает, что он применяется к экранным устройствам, таким как экран телефона, планшета или компьютера. Есть и другие варианты, но они используются реже.

Затем мы обычно добавляем запрос к оператору, поэтому мы получаем что-то вроде:

@media screen и ...

Запросы, как и все CSS, применяются в том порядке, в котором они определены.

Это очень важно понимать, поскольку мы обычно хотим заниматься разработкой «Сначала мобильные» .

Mobile-First означает, что мы сначала определяем правила компоновки в CSS для наименьшего форм-фактора (телефон в портретном режиме).Затем мы определяем запросы к целевым устройствам по мере их постепенного увеличения. Обычно у нас есть несколько переменных SASS, которые примерно соответствуют стандартным размерам устройств.

Почему у нас нет переменных для конкретных устройств? Правила стало бы невозможно писать и поддерживать. Разрешение устройства резко меняется от одного телефона к другому.

Два очень распространенных запроса, которые мы, вероятно, будем использовать: min-width и max-width .

Медиа-запросы можно комбинировать с и . Например, следующий запрос будет нацелен только на телефоны с горизонтальной ориентацией (плюс-минус телефон / планшет произвольного размера).

@media screen и (min-width: $ sm-min-width) и (max-width: $ sm-max-width)

Вот простой пример, в котором мы адаптируем представление некоторых кнопок на основе от размера устройства, на котором они отображаются.

Для целей этого примера мы используем min / max-device-width вместо min / max-width , поскольку пример написан на простом HTML / CSS.

Если вы используете Angular, вы можете использовать min / max-width . Я не уверен, что делает или настраивает процесс компиляции SASS, чтобы это работало. Просто знайте, что там, где вы видите min / max-device-width в примере HTML, вы можете использовать min / max-width в Angular со скомпилированным SASS. Это может быть или не быть правдой с простым CSS в Angular или другими компиляторами SASS?

• Сохраните этот HTML / CSS как media-query.html и откройте его в Chrome.
• Откройте инструменты разработчика Chrome
• Нажмите кнопку «Отзывчивый».
• Выберите iPhone 6/7/8
• . Обратите внимание, что кнопки сложены друг на друга, и это помечено как «Портрет по телефону».
• Переключиться на горизонтальное вращение
• Обратите внимание, что кнопки согнуты по краям экрана, и это помечено как «Телефонная альбомная ориентация».
• Выбрал iPad
• Обратите внимание, что кнопки согнуты по краям экрана и теперь используют текстовые метки и помечены как «Портрет планшета».
• Переключиться на поворот в альбомной ориентации
• Обратите внимание, что кнопки согнуты по краям экрана и используют как потрясающие значки, так и текстовые метки, и это помечено как «Пейзаж планшета / Рабочий стол».

• Строки 76–126 определяют стиль по умолчанию, который, как мы продиктовали, будет ориентирован на мобильные устройства. Итак, это стили по умолчанию для телефона в портретном режиме.

Строки 131–145 определяют стиль для всего, по крайней мере, такого большого, как телефон в альбомной ориентации. Единственные стили, определенные в этом блоке, — это стили, которые переопределяют , что определено в разделе мобильных телефонов с книжной ориентацией. Таким образом, мы ожидаем, что во всех форм-факторах выше портретного телефона кнопки будут расположены в ряд, а не в столбец.

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

Строки 170–184 определяют стиль ТОЛЬКО планшета в портретном режиме.Этот блок наследуется от предыдущих запросов, т.е. показывает текст вместо значка. Но он отменяет границы и радиус кнопки, чтобы быть более округлыми и выраженными. Последующие запросы не будут унаследованы от этого, потому что у этого есть как минимальный, так и максимальный запрос.

Строки 190–204 определяют стиль любого планшета в альбомной ориентации или больше. Он наследуется от всех предыдущих запросов, кроме блока 170–184, который ограничен запросом min + max. Он покажет и значок, и текст.

• Какие границы будут у кнопок?
• Какая будет раскладка кнопок?

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

Изображение предоставлено фотографией с сайта Pixabay

Приходите послушать ведущих спикеров сообщества, экспертов, лидеров и команду Angular, которые в течение двух дней вместе рассказывают обо всем, что вам нужно, чтобы максимально использовать Angular в ваших корпоративных приложениях.
Темы будут сосредоточены на следующих четырех областях:
• Monorepos
• Микро-интерфейсы
• Производительность и масштабируемость
• Ремонтопригодность и качество
Подробнее здесь >> https://enterprise.ng-conf.org/

Полный Руководство по медиа-запросам CSS

Медиа-запросы — это то, что делает возможным современный адаптивный дизайн. С их помощью вы можете установить различный стиль в зависимости от таких вещей, как размер экрана пользователя, возможности устройства или предпочтения пользователя. Но как они работают, какие есть и какие использовать? Вот — полное руководство по медиа-запросам.

Что будет проходить в этом руководстве:

Что такое медиа-запрос? Медиа-запрос — это особая функция CSS, которая позволяет вам условно применять стили на основе тип мультимедиа, мультимедийная функция или и то, и другое. Вы используете их в первую очередь для проверки размеров экрана и применения CSS на основе этого, но медиа-запросы могут делать много других мощных вещей.

Вот общая структура медиа-запроса:

  @media  and (media feature) {
  
}  

Он начинается с ключевого слова @media , также называемого «at-rule», за которым может следовать тип мультимедиа и ноль или более мультимедийных функций.

Реальный пример медиа-запроса:

  @media screen and (min-width: 400px) {
  
}  

По-английски это означает следующее: «если сайт отображается на экране, а ширина этого экрана составляет не менее 400 пикселей, примените этот CSS».

Тип мультимедиа и функция мультимедиа являются необязательными, поэтому это действительное правило мультимедиа:

И это также допустимый мультимедийный запрос:

  @media (min-width: 400px) {
  
}  

Если вы не укажете тип носителя, он будет отображаться как тип носителя все , что обычно нормально.

Логические операторы

Рядом с типом носителя и функциями носителя у нас также есть несколько «логических операторов», которые проходят между этими частями: и , или и , а не . Вот как они работают:

Оператор

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

  @media (min-width: 400px) and (max-width: 800px) {
  
}  

Указывает браузеру применить этот CSS, если ширина браузера составляет от 400 до 800 пикселей.

Оператор or:

Вы можете использовать запятую для ввода «или», например:

, который применяется к печати экрана или . Каждая строка, разделенная запятыми, представляет собой отдельный медиа-запрос, и как только один из них оценивается как истинный, применяется CSS в медиа-запросе. В будущем вы также сможете использовать или вместо запятой.

Оператор

Наконец, существует , а не , который можно использовать для отрицания всего медиа-запроса .Таким образом, следующий запрос будет применяться везде, кроме print:

Если вы используете оператор , а не , вы должны также установить тип носителя (например, экран или печать). Если вы этого не сделаете, тип мультимедиа будет все , а затем ваш медиа-запрос будет читать «не все», поэтому он не будет применяться нигде.

не инвертирует весь медиа-запрос . Прокрутите вниз до обозначения not () , чтобы узнать о предстоящей функции, которая позволит вам отрицать только часть медиа-запроса.

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

Вложение

Вы можете вкладывать медиа-запросы в другие медиа-запросы, и это будет нормально работать! Поэтому вместо

  @media (min-width: 400px) и (max-width: 800px) {
  
}  

, вы также можете написать

  @media (min-width: 400px) {
  @media (max-width: 800 пикселей) {
    
  }
}  

В этом примере это может быть не так полезно, но вы можете обернуть весь свой CSS на экране @media {} и сделать свой адаптивный дизайн с вложенными медиа-запросами, а затем получить полностью настраиваемую таблицу стилей печати.Теперь это будет выглядеть немного чище.

Импорт

При желании вы можете добавить один или несколько медиа-запросов, разделенных запятыми, в оператор импорта, чтобы условно импортировать файл, например так:

  @import 'print.css' print;

@import 'dark.css' screen и (предпочитает цветовую схему: темный);  

Если медиа-запрос не соответствует, CSS не будет применяться, но файл все равно будет загружен.

Медиа-запрос в HTML

Вы также можете использовать медиа-запрос в своем HTML, например, в теге

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

Вы также можете использовать медиа-запросы для управления тем, какое адаптивное изображение загружать, используя элемент img с атрибутом sizes или элемент изображения picture с разными элементами source , каждый из которых имеет атрибут media , но поскольку это большая тема, не имеющая отношения к CSS, мы оставим это для другого руководства.

Тип носителя используется для описания типа устройства, на котором работает браузер. Раньше были нагрузки, но спецификация уровня 4 устарела целиком, который так и не был реализован, оставив нам 3, о которых мы должны позаботиться:

Все

Как упоминалось ранее, если вы не укажете тип носителя, он по умолчанию будет установлено значение «все», что означает, что CSS будет применяться ко всем устройствам.

Экран

Наверное, о том, о чем вы сейчас читаете эту статью!

Печать

Для печати страницы или любого "страничного" носителя (например, книги! Знаете ли вы, что люди используют HTML и CSS для разметки книг?)

Знаете ли вы, что можно легко переключаться между экран и печать таблиц стилей в Polypane с нашими функциями эмуляции?

Итак, для полноты, вот все остальные, которые вам никогда не приходилось использовать и, вероятно, никогда не будут:

• звуковой (который был заменен на Speech ),
• Speech (...тоже не рекомендуется. Первоначально для использования с синтезаторами речи, такими как программы чтения с экрана. Не реализовано в браузерах.)
• tty (для терминала),
• tv (... как экран, но по-другому ... как-то?),
• проекция (проекторы),
• портативный (для телефонов они фактически использовались некоторое время до того, как медиа-выражения стали вещью),
• шрифтом Брайля (для устройств Брайля) и
• с тиснением (как комбинация печати и шрифта Брайля, поэтому для печатных шрифт Брайля).

При использовании медиа-запросов хорошо дать себе несколько правил, чтобы вы не добавляли медиа-запросы случайным образом и в итоге не использовали CSS, который ведет себя непредсказуемо и который трудно поддерживать.

Начиная с нуля, я рекомендую писать CSS от узкого (мобильный) до широкого (настольный), а затем использовать для стиля только min-width . Таким образом, вы всегда проектируете «вверх», и ваш CSS остается легким для рассуждений: весь CSS, который вы пишете, будет аддитивным по сравнению с базовым стилем.Исходный CSS может помещать элементы в столбец:

  main {
  дисплей: гибкий;
  flex-direction: столбец;
}  

, и когда вы станете достаточно широким, чтобы показать два столбца, вы переключитесь на горизонтальный:

  @media (min-width: 40rem) {
  главный {
    flex-direction: ряд;
  }
}  

Поскольку основной элемент уже имеет display: flex; , все, что нам нужно было сделать в более широкой точке останова, это изменить направление гибкости на . Мы предотвращаем дублирование кода, и все становится более читаемым и быстрее загружается.

Мы можем распространить это рассуждение на все медиа-функции, описанные ниже. Напишите свой CSS в качестве отправной точки: наиболее поддерживаемая, наименьшая или наиболее доступная версия. Затем постепенно добавляйте стили, используя медиа-запросы.

Чтобы получить более подробные советы о том, как разработать адаптивный веб-сайт, прочтите нашу статью Основные правила адаптивного дизайна.

Функция медиа-запроса составляет основную часть медиа-запроса и оказывает наибольшее влияние на то, что вы разрабатываете.Медиа-функция сделать , лот . Они позволяют вам проверять возможности устройства и браузера, настройки и пользовательские предпочтения помимо типа устройства.

Размеры

Наиболее часто используемые мультимедийные функции связаны с размерами браузера. Вот они:

Ширина и высота

Вы можете проверить точную ширину , минимальную ширину и максимальную ширину и точную высоту , минимальную высоту и максимальную высоту .

ширина и высота вы, вероятно, никогда не захотите использовать, они применимы только для этой точной ширины.

Более полезными являются значения min- * и max- * , которые позволяют писать CSS для экранов, начиная с определенного размера и больше (используя min- * ) или до определенного размера (используя макс - * ).

Все мультимедийные функции ширины и высоты поддерживают стандартные единицы CSS, такие как пиксели и em. Рекомендуется использовать модуль em для медиа-запросов, чтобы он хорошо масштабировался, когда люди увеличивают масштаб своего браузера .Этого не произойдет с пикселями, и rem имеет тот же размер, что и em , когда он используется в медиа-запросах. rem также имеет некоторые ошибки в Safari. Итак, лучше всего подходят на .

Если вы считаете, что размер em s сложен, потому что вы не знаете, насколько велик em : медиа-запросы обрабатываются на верхнем уровне, поэтому 1 em всегда 16 пикселей или то, что браузер установил как размер шрифта по умолчанию (как и ремы).

Знаете ли вы, что Polypane автоматически определяет медиа-запросы ширины и высоты на сайте и создает для них панели? Таким образом, вы всегда будете создавать сайты в соответствии со своими требованиями.Он также поддерживает размеры панелей в EMS, поэтому вам даже не нужно рассчитывать между пикселями и EMS!

Соотношение сторон

Вы также можете проверить соотношение между шириной и высотой, с соотношением сторон , и ориентацией , функциями носителя .

Медиа-функция с соотношением сторон занимает небольшую часть, а также имеет более полезные медиа-функции с минимальным соотношением сторон и с максимальным соотношением сторон . Это позволит вам проверить, имеет ли браузер определенное соотношение между шириной и высотой.Подумайте об этом так: первое число представляет ширину, второе число - высоту. Это означает, что соотношение сторон 2/1 вдвое больше, чем высокое.

Вы можете протестировать (только) квадратные экраны:

  @media (соотношение сторон: 1/1) {
  
}  

Или проверьте экраны 16 на 9:

  @media (соотношение сторон: 16/9) {
  
}  

Подобно ширине и высоте, вы обычно используете варианты min- * и max- * .При определенном соотношении сторон вы можете выбрать, например, отображать изображения в портретном или ландшафтном режиме.

С минимальным соотношением сторон вы можете проверить наличие экранов, которые шире, чем они высокие:

  @media (min-aspect-ratio: 1/1) {
  
}  

И наоборот, используя значение max-aspect-ratio: 1/1 , вы переключаете его на только те экраны, которые выше своей ширины.

Вместо этого вы также можете просто использовать ориентацию : альбомная и ориентация : портрет , что означает то же самое и немного более четкое.

Prefers-color-scheme

С помощью prefers-color-scheme вы можете проверить, предпочитает ли пользователь видеть версию вашего веб-сайта в темном или светлом режиме.

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

Вот как проверить оба:

  @media (prefers-color-scheme: dark) {
  
}

@media (prefers-color-scheme: light) {
  
}  

Между ними, light считается значением по умолчанию.Настолько, что третий вариант без предпочтений был недавно удален из спецификаций из-за отсутствия реализаций.

Знаете ли вы, что Режим эмуляции Polypane позволяет очень легко протестировать темную и светлую темы одновременно.

Реализация темного режима

Если у вас уже есть веб-сайт и вы хотите добавить темный режим, лучший способ сделать это - изменить дизайн каждой части. Это даст вам максимальный контроль и высочайшее качество реализации.

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

  @media (prefers-color-scheme: dark) {
  :корень {
    фон: # 111;
    фильтр: инвертировать (1) оттенок-вращать (180 градусов);
  }

  img,
  видео {
    фильтр: инвертировать (1) оттенок-вращать (180 градусов);
  }
}  

Вот как это работает: Сначала мы устанавливаем темный фон на : root , который по сути является элементом html .Это не обязательно должен быть # 111 (очень темно-серый), он также может быть чисто черным (# 000), или вы можете добавить к нему немного цвета. Все зависит от вашего бренда и дизайна, поэтому выберите тот, который вам подходит.

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

Инвертировать также имеет другой эффект, он также инвертирует цвета.Таким образом, синий станет оранжевым, зеленый станет розовым и так далее. Это не очень хорошо, потому что это означает, что вы просто потеряли цвета своего бренда. Не бойтесь, мы можем вернуть их, повернув оттенок обратно к исходным цветам с помощью hue-rotate (180deg) , отменив инвертирование специально для оттенка ваших цветов.

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

Предпочитает уменьшенное движение

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

  @media (предпочитает уменьшенное движение: уменьшить) {
  
}

@media (предпочитает-уменьшенное-движение: без предпочтений) {
  
}  

Если у пользователя включен параметр «Предпочитает уменьшенное движение», это не означает, что он хочет нет движения , но вы должны быть внимательны: используйте движение только там, где это помогает понять, и если вы это сделаете, держите движение небольшим. (так что исчезает вместо галочки ).В противном случае просто выключите их. А что касается видео, убедитесь, что вы не воспроизводите их автоматически.

Реализация уменьшенного движения

Если вы начинаете новый проект и хотите включить поддержку уменьшенного движения, неплохо рассматривать движение как улучшение: по умолчанию нет или мало движения, и только тогда, когда ссылается-уменьшенный- motion: no-preference установлен, добавьте дополнительное движение на свой веб-сайт. Таким образом, интерфейс по умолчанию будет более доступным.

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

  @media (prefers-reduce-motion: reduce) {
  тело *,
  body * :: before,
  body * :: after {
    задержка анимации: -1 мс! важно;
    продолжительность анимации: 1 мс! важно;
    количество итераций анимации: 1! важно;
    продолжительность перехода: 1 мс! важно;
    задержка перехода: -1 мс! важно;
    поведение прокрутки: авто! важно;
    фоновое прикрепление: начальное! важно;
  }
}  

Это отключит всю анимацию для всех элементов, так что это относительно простой метод, но он идеально подходит для добавления на сайт задним числом, чтобы сделать его более доступным.Для анимации установлено значение 1 мс , поэтому события animationend и transitionend по-прежнему запускаются, потому что ваш javascript может зависеть от них, но с отрицательной задержкой вы не заметите разницы.

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

Display-mode

Если вы разрабатываете игру или видеоплеер, у вас может быть больше, чем просто игра / видео на странице, но когда кто-то переключается в полноэкранный режим, вы хотите показать только игру / видео.Этот медиа-запрос позволяет вам это сделать. Режим отображения поддерживается всеми современными вечнозелеными браузерами и позволит вам проверить, как отображается ваш сайт, с четырьмя возможными вариантами:

• браузер
  Это режим по умолчанию, в котором ваша страница отображается в обычном формате. окно браузера.
• полноэкранный режим
  Ваша страница отображается в полноэкранном режиме и в браузере не отображается хром. Если полноэкранный медиа-запрос не определен, ваш браузер вместо этого будет применять стили, определенные в автономном медиа-запросе .
• автономный
  Страница не отображается в полноэкранном режиме, но также не имеет всех обычных браузерных Chrome. Вместо этого она выглядит как автономное (настольное) приложение. Если не определен автономный медиа-запрос , ваш браузер вместо этого будет применять стили, определенные в медиа-запросе minimal-ui .
• minimal-ui
  Ваша страница отображается в отдельном окне, но браузер по-прежнему будет показывать хром для управления навигацией (например, всплывающие окна).Если не определен медиа-запрос minimal-ui , ваш браузер вместо этого будет применять стили, определенные в медиа-запросе browser .

Как видите, большинство этих значений возвращаются к следующему, поэтому, если вы определите стиль minimal-ui , он также будет применен к автономному и полноэкранному .

Разрешение / -webkit-device-pixel-ratio

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

Вы можете использовать это, например, для показа фоновых изображений сетчатки на дисплеях, которые его поддерживают.

Разрешение принимает число с разрешением dpi (точек на дюйм), dpcm (точек на сантиметр) или dppx (точек на пиксель). В CSS пиксель всегда равен 96dpi , поэтому 1dppx - это обычное разрешение экрана, а 2dppx - «сетчатка».

Вместо dppx вы также можете просто использовать x , чтобы ваш CSS мог выглядеть так:

  @media (минимальное разрешение: 1x) {
  
}

@media (минимальное разрешение: 2x) {
  
}  

Safari - единственный современный браузер, который не поддерживает медиа-запросы разрешения без префикса -webkit- , и у него есть аналогичная функция под названием -webkit-device-pixel-ratio (а также - webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio ), который принимает число без единицы измерения.Подразумеваемая единица измерения такая же, как dppx , поэтому следующий CSS имеет тот же эффект, что и пример с разрешением выше:

  @media (-webkit-min-device-pixel-ratio: 1) {
  
}

@media (-webkit-min-device-pixel-ratio: 2) {
  
}  

Для улучшения поддержки все остальные современные браузеры также поддерживают нотацию -webkit-device-pixel-ratio , поэтому между разрешением и -webkit-device-pixel-ratio можно безопасно использовать последнее для самая широкая поддержка.

Инвертированные цвета

Этот медиа-запрос указывает, что операционная система инвертировала все цвета. Операционная система в этом случае - MacOs, единственная операционная система, которая поддерживает это (и, наоборот, только Safari поддерживает этот медиа-запрос). Он либо выключен, либо включен:

  @media (инвертированные цвета: нет) {
  
}

@media (инвертированные цвета: инвертированные) {
  
}  

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

Взаимодействие:

  @media (hover: none) and (указатель: грубый) {
  
}  

  @media (hover: none) and (pointer: fine) {
  
}  

  @media (hover: hover) and (pointer: coarse) {
  
}  

  @media (hover: hover) and (pointer: fine) {
  
}  

  @media (мин. Цвет: 8) {
  
}  

  @media print и (монохромный: 0) {
  
}
@media print и (монохромный) {
  
}  

  @media (grid: 0) {
  
}
@media (сетка: 1) {
  
}  

  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {};

if (connection.saveData || ['slow-2g', '2g', '3g']. includes (connection.EffectiveType)) {
  
  preloadVideo = false;
}  

  @media (предпочитает контраст: подробнее) {
}

@media (предпочитает контраст: без предпочтений) {
}

@media (предпочитает контраст: меньше) {
}

@media (Prefers-Contrast: custom) {
}  

  @media (предпочитает уменьшенную прозрачность: уменьшить) {
}

@media (предпочитает-уменьшенную-прозрачность: без предпочтений) {
}  

  @media (принудительные цвета: нет) {
}

@media (принудительные цвета: активно) {
}  

  @media (-ms-high-Contrast: active) {
}

@media (-ms-high-Contrast: черное на белом) {
}

@media (-ms-high-Contrast: белое на черном) {
}  

  @media (уровень освещенности: тусклый) {
}

@media (уровень освещенности: нормальный) {
}

@media (уровень освещенности: промытый) {
}  

  p {
  
  цвет: rgb (255 0 0);
}
@media (цветовая гамма: p3) {
  п {
    цвет: цветной (display-p3 1 0 0);
  }
}  

 
@media (min-width: 300 пикселей) {
}


@media (width> = 300px) {
}  

 
@media (min-width: 300px) и (max-width: 750px) {
}


@media (300px <= width <= 750px) {
}  

 
@media (min-width: 300px), (ориентация: альбомная) {
}


@media (min-width: 300px) или (ориентация: альбомная) {
}  

 
@media (min-width: 300px) и (hover: none) {
}


@media (min-width: 300px) and (not (hover)) {
}  

 
@ custom-media --small-screen (максимальная ширина: 768 пикселей);


@media (--small-screen) {
}


@media (--small-screen) и (указатель: отлично) {
  
}  

  const match = window.matchMedia ("(min-width: 400px ) ");


{
  совпадения: true,
  media: "(минимальная ширина: 400 пикселей)",
}  

  const video = document.createElement ('видео');
const canAutoPlay = window.matchMedia ('(предпочитает-уменьшенное-движение: без-предпочтения)'). соответствует;

video.setAttribute ('автозапуск', canAutoPlay);  

  const match = window.matchMedia ('(min-width: 400px)');

match.addEventListener ('изменить', (e) => {
  если (е.Матчи) {
    
  } еще {
    
  }
});