Media queries demystified: css min-width and max-width

Бонус: поддержка iPhone

Программное обеспечение iPhone не поддерживает медиа запрос ориентации, а для iPad релиз версии 4.0 отлично работает с ним.


Мы можем имитировать определение ориентации для iPhone с помощью медиа запросов min- и max-width, которые доступны в версиях начиная с 1.0.

/* Портретная ориентация */
@media screen and (max-width: 320px) {
    body { opacity: 1; }
}
/* Ландшафтная ориентация */
@media screen and (min-width: 321px) and (max-width: 480px) {
    body { opacity: 0; }
}

Так как известно, что максимальная ширина экрана iPhone в режиме портретной ориентации составляет 320px, то мы используем данный факт. Для определения ландшафтной ориентации используется комбинация запросов min/max-width, которая доступна в CSS3. Свойство max-width позволяет избежать неприятных моментов для настольных систем.

Чтобы данные стили работали в iPhone нужно также использовать мета тег :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

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

Coding with Media Queries

STEP 1

Add a class and the CSS you would like between style tags. In this case, the class is , which is similar to those widely used on mobile to make tables and elements stretch to the full width of the device or containing table.

<style>
.100pc {
Width: 100%;
}
</style>

STEP 2


We now add the media query around the class. In this case, for devices with a max screen size of 640px.

<style>
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.100pc {
Width: 100%;
}
}
</style>

STEP 3

<style>
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.100pc {
Width: 100%!important;
}
}
</style>

Email Client Media Query Quirks

Outlook.com

As highlighted by Remi Parmentier, with the new updates to Outlook.com and the Outlook apps that are following suit, it seems there is now support for one media query.

Gmail

Gmail supports media queries, but is especially strict with CSS and one misplaced curly bracket can render the whole lot being ignored. Using a CSS validator such as the official  will pick up on any obvious mistakes.

Outlook Desktop

Outlook on desktop doesn’t support media queries, but we can use this to our advantage. By wrapping any for linking web fonts in a media query, they will be ignored and stop Outlook rendering fonts as Times New Roman:

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS ЦветаCSS Значение цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index

Определение

Media — ключевой термин Торонтской школы теории коммуникаций. Это форма множественного числа, образованная от латинского medium, переводимое как «средний» или «посредник». Означает субстанцию, через которую передаётся сила или любое другое воздействие, преимущественно используется в контексте спиритуализма и ряде духовно-эзотерических практик.

Это совсем не значит, что в данном случае следует отказываться от перевода media на русский язык, тем более что перевод media как средств коммуникации не только правилен, но и вошел в русский язык еще в 1960-х годах, когда отказ от перевода и, соответственно, внедрение в русский язык английского media как русского «медиа» просто не мог еще никому прийти в голову.

В настоящее время средства коммуникации — обширное понятие, которое включает в себя всю совокупность технологических средств и приёмов коммуникации, служащих для передачи конкретному потребителю информационного сообщения в том или ином виде: текст, музыка, изображение.

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

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

Это видно уже, например, из таких рассуждений:

1. Понятие медиа намного шире каждого из таких терминов или их совокупности. Медиа включает в себя предметы, которые в обычном понимании совершенно не относятся к средствам связи. Одежда, архитектура или колесо также могут быть причислены к медиа.2

Влияние медиа на передаваемое ими сообщение существенно и не менее важно, чем само сообщение. СМИ же рассматривают исключительно как инструмент или канал коммуникации, не влияющий на смысл передаваемого сообщения.

Литература

  • Havelock E., Harold A. Innis: a memoir (with a preface by H. Marshall McLuhan). Toronto: Harold Innis Foundation, 1982.
  • Stamps J. Unthinking Modernity: Innis, McLuhan and the Frankfurt School. Montreal: McGill-Queen’s University Press, 1995.
  • Postman, Neil Amusing Ourselves to Death: Public Discourse in the Age of Show Business 1985
  • Маклюэн М. Понимание Медиа: внешние расширения человека / перевод с английского В. Г. Николаева. — М.: Гиперборея; Кучково поле, 2007. — 464 с
  • Бузин В. Н. Социальное управление российским медиапространством: системно-деятельностный подход. М.: Юнити, 2012. 311 с.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Совместимость с браузерами


We’re converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven’t yet converted the data it contains.

  • Настольные
  • Мобильные
Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка(, , ) 1.0 1.0 (1.7 или ранее) 6.0 9.2 1.3
Нет Нет Нет 9.2 Нет
Media features 1.0 1.0 (1.7 или ранее) 9.0 9.2 1.3
media feature ? (47) ? ? ?
Особенность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка (, , ) 1.0 1.0 (1.7) (Да) 9.0 3.1
Нет Нет Нет 9.0 Нет
Media features 1.0 1.0 (1.7) (Да) 9.0 3.1
media feature ? (Да) ? ? ?

Платный доступ к статьям

Перевод

Часть I

Я ненавижу платные подписки. Категорически их не перевариваю. Типичный аргумент в пользу бизнеса: компании могут либо сделать вашу жизнь лучше (предоставляя вам любимые продукты) либо никак на нее не повлиять (предлагая продукты, которые вам не нравятся, и вы ими не пользуетесь). Но навредить они вам точно не могут. Хотя есть парочка исключений. Например, если они вытесняют или уничтожают любимую компанию, или их деятельность все-таки вызывает какие-либо побочные эффекты, или они лоббируют правительство, во имя собственной выгоды. Но в целом, если некий бизнес вас раздражает, вы должны понять, как работает одно из этих необычных условий. В противном случае, “компании просто не приносят пользы, какой вам хотелось бы”, не причиняя при этом никакого вреда. Итак, вот стандартное объяснение введения платной подписки. Журналисты предлагают вам следующий расклад: вы читаете их статьи, а взамен платите. Вы не можете претендовать на их продукт, не заплатив деньги. Журналистам нужно зарабатывать на жизнь, как и всем остальным. Поэтому, можно либо согласиться на их предложение, отдав деньги за статьи, или отклонить сделку, и от того ваша жизнь хуже не станет. Но мой внутренний голос говорит, что все не так. Я уверен, что был бы гораздо счастливее, живя в мире, в котором нет крупных изданий, нежели обитал в мире, где есть газеты, требующие плату за свой материал. Задумайтесь на секунду, чувствуете ли вы то же самое. Если да, что же тогда происходит?

Завязывайте со своим «Хабр не торт». Хабр — это феномен

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

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">
  • Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.

Доступные значения:

Значение атрибута Определение
width Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width).
height Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height).
initial-scale Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение — положительное целое число от 0.0 до 10.0.
user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Coding for Two Columns with Media Queries

Each of the tables with 49% width can fit side by side when on desktop view. 49% is used instead of 50% because Outlook can be very picky about what fits side-by-side and what doesn’t.


You can make 50% width fit if you set all of your styles just right (no border, padding, etc.). You can make a three-column section using similar code, but use three tables set to 32% width instead.

When the responsive code kicks in, we’ll want to make these content blocks 100% width for phones so that they fill the whole screen. This can be accomplished for most phones with a single media query:

You can continue to add media queries with special styles to cover as many different screen sizes as you’d like. You should also add code to your media queries to optimize and for each screen size, improving readability for your subscribers.

Умный дом без пультов, но с кубиком

Из песочницы

Проблема

На время ремонта новой квартиры я вернулся в квартиру, в которой не жил 10 лет и решил поупражняться в дисциплине “Умный дом”, чтобы со знанием дела обустраивать уже новую квартиру. Техника в этой квартире тоже не самая умная и не самая новая, ибо была произведена ~10 лет назад. Больше всего в квартире меня напрягало обилие инфракрасных пультов, они терялись и нагружали мозг подбором нужного. До недавнего времени было принято на пультах делать огромное количество малоиспользуемых кнопок. А еще пульты не эстетичны и не гигиеничны, одни угловатые, другие с скруглёнными гранями, кнопки желтеют, в них копятся остатки жизнедеятельности обитателей на которых образуется «подкнопочный биоценоз». В итоге по дому разбросано десяток пультов с кучей ненужных кнопок, для простой операций приходилось искать по две-три штуки, их вид царапает взор, хотелось удобного тактильного и модного голосового управления.


С этим читают