Как изменить таблицу на основе размера экрана?

Я хочу изменить свой стол, чтобы он выглядел красиво на мобильной платформе. Все, что я хочу сделать, это изменить таблицу, так что это два столбца. Я использую этот код для отправки электронной почты. Поэтому я не могу связать таблицу стилей с моим html. Рекомендуется использовать встроенные стили. Можно ли выполнить это с помощью javascript?Как изменить таблицу на основе размера экрана?

Вот что я пробовал:

<script> 
    $(document).ready(function() { 
    if ($(window).width() < 1024) { 
     <table align="center"> 
      <tr> 
       <td style="vertical-align: top;">Property:</td> 
       <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td> 
      </tr> 
      <tr> 
       <td style="vertical-align: top;">Resident Name:</td> 
       <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td> 
      </tr> 
      <tr> 
       <td style="">Unit:</td> 
       <td style="padding-left: 10px; font-weight: bold;">STORE</td> 
      </tr> 
      <tr> 
       <td style="">Account #:</td> 
       <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td> 
      </tr> 
     </table> 
    } else { 
     <table align="center"> 
      <tr> 
       <td style="vertical-align: top;">Resident Name:</td> 
       <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td> 
       <td style="vertical-align: top;">Property:</td> 
       <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td> 
      </tr> 
      <tr> 
        <td style="">Unit:</td> 
        <td style="padding-left: 10px; font-weight: bold;">STORE</td> 
      </tr> 
      <tr> 
       <td style="">Account #:</td> 
       <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td> 
      </tr> 
     </table> 
     }}); 
</script>

Любая помощь будет принята с благодарностью.

источник

2015-06-22 Anthony

Вы используете jQuery в электронном письме? – isherwood

Вы не можете использовать Javascript в письме, вы могли бы, но почти каждый почтовый клиент запретил выполнение его –

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

Нет, определенно не используйте Javascript для отправки электронной почты, так как большинство клиентов полностью отключает его.

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

Для писем, я рекомендую прочитать this awesome article about using media queries for emails. Огромным недостатком этого является отсутствие поддержки со стороны Gmail (что автор утверждает в конце текста). Если покрытие пользователей Gmail является обязательным, вы должны придерживаться самого основной реагирующей практики до тех пор, как я знаю, например, с помощью em и/или % единиц для width, height, padding, margin и т.д. вместо px в ваши стили CSS.

источник

2015-06-22 22:22:54 lucasnadalutti

Спасибо! Я решил свой ответ, используя медиа-запросы. – Anthony

Рад, что я мог бы помочь! :) – lucasnadalutti

Как изменить таблицу на основе размера экрана?

ответ

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