для более ранних версий почтовых клиентов, построенных на Webkit (в основном Apple Mail 6 и ниже, а также Outlook 2011 в некоторых случаях). Эти ранние версии поддерживают max-width только для блочных элементов и наиболее простой способ заставить нашу вёрстку отображаться в правильном размере — обернуть её в этот div, что позволит нам обойтись без установки ширины в media query, как в моём предыдущем тьюториале (благодарите zerocents за этот фикс).

2. Начальные стили Далее, создайте чистый CSS файл с названием styles.css Вставьте следующее в только что созданный файл: /* Basics */ body { Margin: 0; padding: 0; min-width: 100%; background-color: #ffffff; } table { border-spacing: 0; font-family: sans-serif; color: #333333; } td { padding: 0; } img { border: 0; } .wrapper { width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .webkit { max-width: 600 px; } /* Windows Phone Viewport Fix */ @-ms-viewport { width: device-width; } Здесь я обнуляю margin и padding для body, таблицы и табличных ячеек, а также обнуляю всякие границы, которые могут появиться вокруг изображений по ссылкам. Наши стили для тегов table и td нужны в качестве замены HTML атрибутов cellpadding и cellspacing. Вы вправе выбрать HTML атрибуты как альтернативу, если желаете; в прошлом я всегда поддерживал выбор HTML атрибутов вместо CSS свойств там где это было возможно, однако, по мере того как я работал над более и более масштабируемыми проектами, я обнаружил что могу достичь большей управляемости, размещая это в CSS, в особенности если вы, как правило, работаете в платформе, которая автоматически обрабатывает CSS инлайнинг.Также я обычно добавляю min-width со значением в 100% тегу , дабы избежать всяких ситуаций когда контент не занимает полную ширину вьюпорта на мобильном устройстве, также всегда хорошей идеей будет задать цвет для background, даже если он абсолютно белый, дабы избежать цветовых глюков background в Outlook или Lotus Notes.

У нас также имеются свои стили с несколькими свойствами для .wrapper, которые препятствуют странному изменению размера текста на Windows Phones и iOS, вместе с этим table-layout: fixed будет гарантировать, что наш отцентрированный контент также будет отцентрирован в Yahoo mail. Мы устанавливаем max-width шириной в 600 px для нашего .webkit div для ограничения содержимого в Apple Mail 6 (и ниже) и Outlook 2011.

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

3. Создание внешнего структурного контейнера Начнём с одного из ключевых строительных блоков в данном методе: условной таблицы (conditional table) для Outlook, которая является скрытой для всех остальных клиентов. Нам это необходимо, т. к. мы собираемся использовать свойство max-width, которое Outlook не поддерживает. Поэтому нам необходимо создать специальные Outlook-only таблицы с явно заданной пиксельной шириной, которые будут всё вмещать. Применяется наша условная таблица для Outlook, т. к. Outlook не поддерживает свойство max-widthИтак, давайте удалим заполнитель [content goes here] из нашего HTML файла и вставим следующий код. Я стараюсь выравнивать все теги условного кода (conditional code) по левому краю и соблюдать равный уровень отступа для читабельности, но вы можете выравнивать их по собственному усмотрению.

[content goes here]

Примечание: для тегов условной таблицы стили отсутствуют. Я намерен применить инструмент для инлайнинга от Campaign Monitor inliner.cm, он также выполняет инлайнинг стилей и для условных таблиц. Если вы собираетесь использовать другой инлайнер, то он может этого не сделать, поэтому удостоверьтесь что cellpadding=»0» cellspacing=»0» border=»0» добавлены в условную таблицу Outlook.Внутри нашей условной таблицы вы увидите что у нас имеется  — это наш ключевой внешний строительный блок для всех клиентов кроме Outlook.

Мы хотим, чтобы эта внешняя таблица имела ширину в 100% на малых кранах, а на экранах большего размера — не более 600 px. Поэтому мы намерены установить её width в 100% и задать ей max-width в 600 px

Для нашей таблицы установлена ширина в 100%, пока она не достигнет 600 pxПолезный совет: для быстрой и простой буферизации на мобильном устройстве без заморочек с паддингами и media queries измените ширину своей таблицы со 100% до 95%

Итак, давайте поместим эти стили в наш styles.css:

.outer { Margin: 0 auto; width: 100%; max-width: 600 px; } У нас здесь также есть Margin: 0 auto; чтобы отцентрировать нашу таблицу в Yahoo при просмотре в Chrome. margin, однако, применяется здесь только ради Yahoo, я всегда пишу Margin с большой буквы чтобы Outlook.com его не чистил — маленький изящный хак, спасибо Wiktor за комментарий в этом блогпосте.Теперь у нас есть внешняя структура, пришло время добавить какой-нибудь контент.

4. Добавление баннерного изображения в полную ширину Сперва скачайте файлы обучающего материала и переместите папку /images в папку с index.htmlТеперь давайте добавим класс full-width-image к td внутри нашей таблицы .outer, потом мы заменим наш заполнитель [content goes here] на тег image, таким образом наша таблица примет следующий вид:

Вы обратите внимание, что я не побеспокоился об атрибутах width или height для изображения. Я собираюсь решить это с помощью CSS, который мы добавим, и он будет выглядеть следующим образом: .full-width-image img { width: 100%; height: auto; } Это подводит нас к одному весьма важному нюансу в этом методе, который касается изображений.Изображения всегда должны выводиться в размерах, соответствующих по физическим пикселям Этот метод всецело ориентирован на использование процентов дабы всё было подвижно и выглядело хорошо. Следовательно, нам практически всегда нужно, чтобы ширина наших изображений была установлена в 100% от своих контейнеров. Если мы хотим осуществить это, то должны помещать наши изображения, в размере, который соответствует по физическим пикселям. По той причине, что Outlook 2007, 2010 и 2013 не будут масштабировать (в большую или меньшую сторону) изображения по отношению к их физическим размерам, до тех пор пока вы явно не зададите пиксельную ширину оного. Если бы вы разместили изображение шириной в 1200 px в ячейке шириной 600 px и задали ему ширину в 100%, то Outlook вывел бы его шириной в 1200 px. Поэтому, если у вас ячейка шириной в 600 px (на декстопе), то вам необходимо применять изображение шириной в 600 px.Чтобы решить проблему с изображениями, размер которых менее поддерживаемой ширины экрана, вы можете явно задать им пиксельную ширину (например, 100 px) и использовать изображения высокого разрешения, т. к. в приложениях без media-query их ширина всегда будет 100 px что прекрасно смотрится в любом мобильном вьюпорте. Однако, если бы у вас был столбец шириной в 350 px, то вы бы не смогли задать изображению ширину в 350 px, поскольку, если бы вам пришлось вывести это изображение в Gmail app на вьюпорте шириной в 320 px, то оно бы было слишком широким.

Часто необходимо удостоверится, что ширина всех изображений задана в 100%, даже если они у́же самого маленького мобильного вьюпорта, т. к. это даёт вам больше гибкости при добавлении прогрессивного улучшения в виде media query.

Моё практическое правило — всякое изображение должно выводиться в соответствующем по физическим пикселям размере, если только это не иконка шириной менее 100 px

Итак, принимая это всё во внимание, мы сохранили изображение с именем header.jpg, шириной именно в 600 px и разместили его в нашей директории images. Позаимствуйте его или сохраните своё собственное и теперь вы можете выполнить предпросмотр HTML файла и увидеть как изображение гибко меняет размер в зависимости от размера вьюпорта.

5. Добавление одностолбцового макета Добавьте ещё одну строку в таблицу .outer с помощью следующей разметки:

Lorem ipsum dolor sit amet Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.

И добавьте следующие стили в styles.css: .inner { padding: 10 px; } p { Margin: 0; } a { color: #ee6a56; text-decoration: underline; } .h1 { font-size: 21 px; font-weight: bold; Margin-bottom: 18 px; } .h2 { font-size: 18 px; font-weight: bold; Margin-bottom: 12 px; } /* One column layout */ .one-column .contents { text-align: left; } .one-column p { font-size: 14 px; Margin-bottom: 10 px; } Вы обратите внимание, что я использовал теги

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

вместо

, т. к. у Outlook.com есть кое-какие стили для h1, h2 и h3, которые всегда перекрывают ваши стили.Таким образом в указанном выше CSS мы установили 10 px padding для нашего столбца, сбросили margin для 

, установили некоторые базовые стили для ссылок и моих классов .h1 и .h2, а затем обеспечили выравнивание по левому краю в стилизированных абзацах для нашего столбца.

Теперь перейдём к увлекательному этапу… множеству столбцов!

6. Добавление двухстолбцового макета* *который будет отцентрирован при вертикальном складывании Мы намерены создать двухстолбцовый макет для декстопа, который на мобильных устройствах расположится вертикально, образуя единый отцентрированный столбецСперва добавьте новую строку в таблицу .outer. Она содержит ячейку с классом .two-column, а внутри неё — условную таблицу для Outlook с двумя столбцами шириной в 50%:

[column to go here] [column to go here] Эти условные столбцы важны, поскольку без них Outlook не позволит двум нашим плавающим таблицам расположиться аккуратно рядышком. Поскольку Outlook к тому же не поддерживает max-width, эти столбцы помогают удерживать каждый столбец (прим. пер. имеется ввиду дочернее содержимое) в нужном размере. Визуализация того, что будет представлять из себя наша двухстолбцовая структураТеперь замените каждый заполнитель [column to go here] следующим:

[content goes here]

Способ с помощью которого мы намерены заставить два столбца плавать (параллельно) рядом на десктопе, но складываться вертикально по центру на мобильном устройстве, состоит в использовании комбинации text-align: center и display: inline-block. Все инлайновые и инлайн-блочные элементы подчиняются свойству text-align. Поэтому, если мы обернём наши таблицы в div с установленным inline-block, то мы сможем довольно просто задать их выравнивание (alignment), когда они расположены друг над другом — установкой свойства text-align для их контейнера. Вы можете выбрать выравнивание по левому краю, центру или правому краю и ваши инлайн-блочные divы будут «слушаться». И вы действительно сможете задать самой таблице display: inline-block, но только если не собираетесь размещать внутри неё какие-либо другие таблицы. Всё начинает вести себя дико, если вы вкладываете таблицы внутрь inline-block таблиц, поэтому, если вам необходимо что-то вложить, убедитесь что инлайн-блочным контейнером является div.Давайте добавим нашей контейнерной ячейке стиль .two-column с выбранным нами выравниванием. Мы также собираемся добавить font-size: 0 чтобы избавиться от пустых пространств между нашими столбцами внутри этой ячейки.

/*Two column layout*/ .two-column { text-align: center; font-size: 0; } Теперь мы зададим стиль нашему инлайн-блочному div, который ведёт себя как столбец: .two-column .column { width: 100%; max-width: 300 px; display: inline-block; vertical-align: top; } Мы используем ширину в 100% с максимальной шириной до 300 px, таким образом, именно у этого столбца на вьюпортах с шириной менее 300 px, будет 100% ширина.Вы можете задать своему vertical-align что угодно: top, center или bottom. [примечание переводчика: здесь, очевидно, ошибка — разве у vertical-align существует свойство center?] Значение top для vertical-align задаёт поведение при котором каждый столбец ведёт себя сродни табличной ячейки с HTML-свойством valign=«top», соответственно middle даёт эффект подобный valign=«middle». Обратите внимание, что у вас может быть множество строк из этих div внутри одной ячейки и вертикальное выравнивание всегда будет следовать принципу ряда за рядом. Это замечательно! Также удостоверьтесь, что выбор, который вы совершили здесь, совпадает с valign, который вы установили для условной таблицы Outlook, т. к. Outlook не поддерживает vertical-align. Если у вас выравнивание в Outlook не соответствует ожидаемому, то распространённой причиной может быть отсутствие заданного значения valign для условной таблицы.

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

Итак, давайте заменим наши два заполнителя [content goes here] следующим:

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Здесь ширина наших изображений составляет 280 px. Согласно тому, что обсуждалось выше, оно было сохранено в точных пиксельных размерах, чтобы соответствовать ячейке, в которую мы будем его размещать. Ширина каждого столбца составляет 300 px с 10 px паддингами на каждой стороне, что оставляет 280 px для изображения.Далее мы зададим стиль для класса .contents, установив ему ширину в 100%:

.contents { width: 100%; } А затем давайте добавим наш стайлинг двухстолбцовому макету, чтобы задать размер нашего шрифта и выравнивание текста, обеспечить вывод изображений на 100% ширину и установить немного паддинга для нашего тексту снизу:

.two-column .contents { font-size: 14 px; text-align: left; } .two-column img { width: 100%; height: auto; } .two-column .text { padding-top: 10 px; } Теперь у вас должен быть двухстолбцовый макет, который складывается столбцом по вертикали, когда вы меняете размер своего браузера, и сжимается должным образом, когда вы сужаете вьюпорт до менее 300 px.7. Добавление трёхстолбцового макета И снова мы намерены создать расположенные рядом (бок о бок) столбцы, которые складываются вертикально на мобильном устройстве, с помощью комбинации text-align: center и display: inline-block.Мы собираемся использовать text-align: center чтобы наши столбцы складывались по центру, но вы также можете применить выравнивание по левому или правому краю. Вот пример того, как складываются элементы при выравнивании по центру и по левому краю:

пример того, как будут сложены 3 столбца при задании контейнеру text-align: center пример того, как будут сложены 3 столбца при задании контейнеру text-align: leftИтак, мы повторим двухстолбцовый процесс, с добавлением дополнительного. Добавьте данный новый ряд в таблицу .outer. (Я обычно предпочитаю использовать процентную ширину для ячеек в условных таблицах Outlook, но в данном случае будет проще задать для каждой ширину в 200).

[column to go here] [column to go here] [column to go here] Теперь добавьте следующий CSS, чтобы задать дополнительный padding этому ряду и чтобы установить все свойства, которые мы использовали в двухстолбцовом макете, дабы заставить наши столбцы вести себя так, как нам это необходимо. Он также задаст стили для наших div столбцов, которые мы вскоре добавим, и ширина которых в данном случае будет составлять 200 px. /*Three column layout*/ .three-column { text-align: center; font-size: 0; padding-top: 10 px; padding-bottom: 10 px; } .three-column .column { width: 100%; max-width: 200 px; display: inline-block; vertical-align: top; } .three-column .contents { font-size: 14 px; text-align: center; } .three-column img { width: 100%; height: auto; } .three-column .text { padding-top: 10 px; } Давайте вставим наши столбцы, меняя каждый из заместителей [column to go here] на таблицу:

Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.

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

Добавление трёхстолбцового макета с множеством рядов Если вам нужно добавить большее количество рядов в свои многостолбцовые макеты, то вы можете добавить столько инлайн-блочных элементов в отдельную контейнерную ячейку, сколько вам необходимо. Таким образом, если вьюпорт становится слишком узок чтобы вмещать все столбцы, они просто пересортируются в соответствии со свободным местом. И хотя вам нет нужды разделять ряды из divов для большинства клиентов, вам определённо необоходимо добавить дополнительные к своей условной таблице для Outlook. Вот как работает наша условная таблица для Outlook, разделяя наши ряды и столбцыДавайте испытаем это, добавив новый ряд с классом .three-column в таблицу .outer. Вот у нас ряд из трёх столбцов с условной таблицей внутри. Вы увидите, что в нашей таблице имеются три столбца и мы звершаем ряд условной таблицы с помощью и открываем новый , который содержит 3 другие ячейки шириной в 200 px.

[column to go here] [column to go here] [column to go here] [column to go here] [column to go here] [column to go here] Далее, мы добавляем таблицу подобную следующей, каждой условной ячейке, убирая заместитель [column to go here]:

Heading Class eleifend aptent taciti sociosqu ad litora torquent conubia Read more

Теперь, если вы измените размер своего окна, вы снова увидите, что столбцы сложились, заполняя доступное пространство. Три столбца уменьшатся до двух столбцов с тремя строками, до тех пор пока окончательно не схлопнутся в единый столбец с шестью строками.Добавление ещё большего количества столбцов Мы больше не будем добавлять многостолбцовые макеты в данном учебном материале, но в вашем макете может быть столько столбцов, сколько угодно. Всё, что вам необходимо сделать — удостовериться, что все ваши блоки с контентом соответствуют ширине вашего контейнера, и что ваша условная таблица для Outlook содержит подходящее количество ячеек и рядов для вмещения оных.Добавление двухстолбцового макета с 'Sidebar' Далее мы создадим двухстолбцовый макет с шириной столбца в 500 px, а затем более узкую боковую панель шириной в 100 px для иконки.Сперва мы создадим ряд и ячейку с классом .left-sidebar, а внутри неё поместим условную таблицу для Outlook, в которой присутствует один ряд и два неравных столбца:

[column to go here] [column to go here] Затем, в каждом столбце, убирая заместитель [column to go here], мы добавим таблицу. В этот раз один из них мы назовём .column .left, а другой — .column .right, т. к. у них разная ширина.Примечание: здесь я использую множество классов для одного элемента. Некоторые инструменты для инлайнинга и/или ESP могут этого не поддерживать, поэтому, сперва выполните проверку с помощью своей системы или платформы. Как было сказано выше, я использую inliner.cm для инлайнинга своего CSS, который точно поддерживает множество классов.

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

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

Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. Read on

Эти таблицы весьма просты и внутри них ничего не вложено, поэтому, вместо того чтобы оборачивать их в div, я собираюсь задать display: inline-block для самих таблиц, чтобы сократить разметку. Как обсуждалось выше, станете ли вы вкладывать внутрь большее количество элементов — всего лишь вопрос практичности. Если вы будете реализовывать большое количество вложенностей, оберните эту таблицу в div и задайте ему класс .column .rightДалее, давайте зададим стили контейнеру и установим столбцы:

/* Left sidebar layout */ .left-sidebar { text-align: center; font-size: 0; } .left-sidebar .column { width: 100%; display: inline-block; vertical-align: middle; } .left-sidebar .left { max-width: 100 px; } .left-sidebar .right { max-width: 500 px; } И, наконец, давайте зададим стили текста и цвет ссылки: .left-sidebar .contents { font-size: 14 px; text-align: center; } .left-sidebar a { color: #85ab70; } Теперь у вас должен получиться макет с левой боковой панелью и, когда вы уменьшите размер браузера, иконка расположится сверху текста по середине.9. Добавление макета с обратным 'Sidebar' Теперь мы хотим скопировать макет с боковой панелью и в этот раз нам необходимо чтобы иконка была с правой стороны, дабы создать визуальную привлекательность на десктопе. Но мы хотим чтобы контент на мобильном устройстве складывался столбцом точно так же, как и в нашем предыдущем макете с боковой панелью, дабы иконка была поверх текста.Сначала мы намерены скопировать и вставить весь наш ряд с ячейкой .left-sidebar, и единственное что мы будем менять — это класс контейнерной ячейки, с .left-sidebar на .right-sidebar:

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Per inceptos

Всё остальное остаётся в прежнем виде.Мы собираемся сделать следующее: обратить dir=«rtl» (это означает направление справа налево) себе в преимущество. Это свойство предназначено для обозначения алфавитов, которые размещаются справа налево, таких как арабский. Но в нашем случае оно просто будет указывать каждому почтовому клиенту, что наши элементы нужно выводить в обратном порядке.

Наши элементы будут выводиться в обратном порядке, если для их контейнера установлен dir=«rtl«Сперва, вам необходимо добавить dir=«rtl» для контейнера (.right-sidebar). Это указывает, что наши плавающие таблицы нужно выводить справа налево. Таким образом, наш открывающий тег теперь должен принять следующий вид:

Затем, в условном коде для Outlook нам также необходимо добавить dir=«rtl» для , т. к. мы указываем таблице, что  нужно выводить в обратном порядке.Итак, наш открывающий условный комментарий должен сейчас выглядеть следующим образом:

И, наконец, нам необходимо добавить dir=«ltr» к нашим таблицам .column-left и .column-right, поскольку внутри них находится контент и, поскольку он на английском, его необходимо направлять слева направо. Если мы не установим это значение для данных элементов, они унаследуют направление справа налево от своих родительских элементов.Наш .column-left теперь должен выглядеть следующим образом:

А наш .column-right сейчас должен выглядеть так:

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Per inceptos

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

Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. Per inceptos

И, наконец, давайте добавим наших стилей, которые полностью идентичны .left-sidebar за исключением ссылки. /* Right sidebar layout */ .right-sidebar { text-align: center; font-size: 0; } .right-sidebar .column { width: 100%; display: inline-block; vertical-align: middle; } .right-sidebar .left { max-width: 100 px; } .right-sidebar .right { max-width: 500 px; } .right-sidebar .contents { font-size: 14 px; text-align: center; } .right-sidebar a { color: #70bbd9; } Славно! Теперь у нас есть две панели на противоположных сторонах, но когда всё выстраивается в столбец на мобильном устройстве обе боковые панели выводятся над текстом.10. Добавление прогрессивного улучшения с помощью Media Queries Теперь у вас есть завершённый почтовый шаблон, отзывчивый везде без единого media query! Но, конечно же, существует совсем немного почтовых клиентов, которым действительно нужна поддержка media queries, теперь, при помощи нескольких твиков, мы можем заняться прогрессивным улучшением нашего (и без того замечательного) шаблона, дабы всё выглядело красиво в таких клиентах как iOS Mail.Сначала мы заставим наши столбцы выводиться на 100% ширины всякого вьюпорта с шириной до 400 px. Мы также ограничим ширину наших трёхстолбцовых изображений до 50%, чтобы они не принимали слишком большой размер. Всё, что нам необходимо сделать — сбросить max-width этих столбцов, поскольку, как вы помните, у них у всех и так уже 100% ширина и их ограничивает лишь max-width.

Итак, добавьте следующее в свой CSS файл:

/*Media Queries*/ @media screen and (max-width: 400 px) { .two-column .column, .three-column .column { max-width: 100% ! important; } .three-column img { max-width: 50% ! important; } } Затем, для ширины между 401 px и 600 px, мы добавим следующее, чтобы двух и трёхстолбцовые макеты выводились как на декстопе, но при этом сжимались до подходящего размера. @media screen and (min-width: 401 px) and (max-width: 620 px) { .three-column .column { max-width: 33% ! important; } .two-column .column { max-width: 50% ! important; } } Это — абсолютно произвольные изменения для демонстрации возможностей, вы можете играться и возиться с этим сколько угодно, чтобы добиться желаемого результата во всём разнообразии размеров устройств, которые поддерживают media queries.11. Инлайнинг вашего кода Наконец, если вам нужно выполнить инлайнинг вашег

© Habrahabr.ru