Как использовать запросы @Media

Я создаю шаблон электронной почты, и теперь я пытаюсь сделать его отзывчивым. У меня возникла проблема, я искал использование тегов "@media", но письма не очень нравятся <style> поэтому я действительно не уверен, как это сделать.Как использовать запросы @Media

<body> 
<table> 
    <table> 
    <tr> 
    <td> 
    text blah blah 
    </td> 
    </tr> 
    </table> 
<!-- This is the one I was responsive (The one below) --> 
    <table> 
    <tr> 
    <td> 
     Make this table responsive <3 
    </td> 
    </tr> 
    </table> 
</table> 
</body>

PS, мне не нужно сверху, чтобы реагировать так, как я могу связать второй с CSS

У меня есть все мои таблицы и рабочего стола дизайн взгляд перфекто»EG дивы и таблицы «%» не «px», и у меня есть 2 divs рядом друг с другом, когда они уменьшаются до мобильных, они все еще находятся на 50% экрана браузера (50% от мобильного и рабочего), но когда они уменьшаются Я хочу, чтобы они были на 100% от мобильного экрана.

источник

2015-07-29 Shaun ' Prawn185 Moore

в , внутри

привет ' Вам просто нужно'! Important', потому что почтовый клиент от Google будет иметь приоритет, если вы не используете '! Important'. –

Позвольте мне 5 минут попробовать :) –

-1

уже сделан и использовать и попробовать его Сво не используется в средах внутри структуры таблицы

<table width="600px" max-width="100%" align="center"> 
    <tr><td>content......</td><td>content....</td></tr> 
    <tr><td>content......</td><td>content....</td></tr> 
    <tr><td>content......</td><td>content....</td></tr> 
    <tr><td>content......</td><td>content....</td></tr> 
</table>

источник

2015-07-29 13:51:48 Simeon

Есть два подхода к использованию медиа запросов - мобильный первый или настольный первым.

Способ, который имеет наибольшую поддержку и, вероятно, самый простой для кого-то, только входящего в HTML CSS, является настольным подходом. В этом случае вы создадите все стили для рендеринга вашего рабочего стола. Затем вы добавляете медиа-запросы для разных точек останова, чтобы настроить адрес электронной почты на экран устройства. Это проще всего и имеет большую поддержку, так как единственные мобильные почтовые клиенты, которые действительно не поддерживают медиа-запросы, - это такие, как приложение Gmail (обычно это небольшой процент вашей мобильной аудитории). Проблема заключается в том, что, используя приложение Gmail в качестве примера, в зависимости от того, как вы создали свой адрес электронной почты, это может привести к его перерыву в проблемах, связанных с отображением приложений Gmail.

Это первый мобильный подход для мобильных устройств. Сначала Mobile строит электронное письмо со встроенными стилями, чтобы правильно отображать его в приложении gmail, а затем использует медиа-запросы и условные выражения mso, чтобы сделать их плотными и правильно заполнить на рабочем столе. Для этого требуется гораздо больше знаний о «причудах и хаках» в CSS и почтовых клиентах, но они могут создавать электронные письма, которые прекрасно отображаются на всех клиентах. Иногда это может потребовать гораздо больше стилей и гораздо большего количества кода, что связано с сложностью различных процессоров в почтовых клиентах.

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

За помощью поддерживаемых CSS, пожалуйста, ссылку - http://www.campaignmonitor.com/css

Надежда эта информация помогла.

Ссылки:

Лакмус - https://litmus.com/blog/understanding-media-queries-in-html-email

Email на кислота - https://www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails

CampaignMonitor - https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

источник

2015-07-29 15:17:54 Gortonington

Hiya отличный ответ BTW. У меня есть все мои таблицы, а дизайн рабочего стола выглядит отлично. EG: div и таблицы «%» не «px», и у меня есть 2 divs рядом друг с другом, когда они уменьшаются до мобильных, они все еще находятся на 50% от браузера (50% от мобильного и настольного), но когда они уменьшатся, я хочу, чтобы они были на 100% от экрана мобильного телефона. –

Это лучше всего сделать, установив их в линию на 100% ширину и установив максимальную ширину в px чуть меньше половины. Вы также должны добавить float (для div или align для table-table гораздо более универсально поддерживается) и display: block или inline-block. Затем, чтобы поддерживать Outlook и другие подобные, возможно, установите вокруг них условную таблицу MSO с определенной шириной и добавьте класс в свои DIV, который определяет ширину в таблице стилей рабочего стола, а затем добавьте запросы к мультимедиа, чтобы вернуться к 100% после определенного размера. Я бы рекомендовал использовать таблицы вместо DIV, из-за поддержки структуры. – Gortonington

Это может быть хорошей ссылкой для вас в вашем поиске: http://julie.io/writing/responsive-layout-email-ux-munich-newsletter/ – Gortonington

Как использовать запросы @Media

Смежные вопросы