Media queries и gmail.com/outlook. Как сверстать письмо адаптивно?

Question

[Думай Головой]

Всем привет!

В статье на хабре предложено решение:
habrahabr.ru/post/258317

Но в outlook и gmail.com оно работать не будет, т.к. у них нет поддержки media queries.

Дело в том, что у меня макет в 2 колонки, который должен выстраиваться в одну колонку на мобильниках.
Нашёл решение без медиа запросов:
webdesign.tutsplus.com/ru/tutorials/creating-a-fut...

Там в п. 6 как раз мой случай, но проблема в том, что при вьюпорте менее 600 пикс эти колонки выстраиваются в одну, но при этом их ширина довольно мизерна - 300 пикселей, а сейчас телефоны по 350-450 пикселей в ширину + в моём макете хедер и футер растягиваются на всю ширину и всё выглядит очень убого. В идеале эти колонки также должны становиться во всю ширину девайса вместе с хедером и футером, а не в 300px как предложено в решении, и как это сделать я не понимаю

Как быть?

Answer 1

[Максим Тимофеев]

Письма верстают таблицами. Резину в них делают задавая ширину в %.

Comments

[Думай Головой]

Это я знаю.
Я пишу про ситуацию с двух колоночным макетом - как сделать в одну колонку и чтобы они занимали всю ширину, а не были зафиксированы в 300 пикселей или в 50%, а были в 100%

[Думай Головой]

то есть две колонки на десктопе и одна на мобильных

[Максим Тимофеев]

Думай Головой: В почте никак. Верстайте почту одинаково

[Максим Тимофеев]

Либо еще можно сделать display:inline-block; тогда будет съезжать вниз если не помещается.

[Думай Головой]

Максим Тимофеев
в tutsplus именно это и советуют, но проблема в том что колонки по 300 пикселей, и когда они съезжают то на экранах более 300 пикселей шириной слева и справа много места остается, и поэтому нужно чтобы эти колонки когда съезжали занимали всё пространство

[Максим Тимофеев]

Думай Головой: Это же почта, тут надо проще все делать. Проблема изначально в идее. Перестой ее так, что бы не было необходимости съезжать.

[Думай Головой]

Максим Тимофеев
скажу дизайнеру чтобы одну колонку рисовал, реально мудрёно получается.

[Максим Тимофеев]

Думай Головой: Не то что мудрено - нереально. Колонок может быть и 6, но они никуда съезжать не должны. Можно сверстать на сайте так как Вы хотите и в письме дать кнопку "смотрите детальнее". Но само письмо должно быть простое.

[Думай Головой]

Максим Тимофеев
если 2 колонки, которые не съезжают то ляписто на мобильниках выглядит, на десктопах нормально

[Максим Тимофеев]

Думай Головой: Люди у которых мобильник с маленьким разрешение крайне редко смотрят на них почту. Я бы забил. Потери будут минимальны.