ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Media queries и Gmail
23 сообщений из 23, страница 1 из 1
Media queries и Gmail
    #38601235
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет.
Требуется сделать адаптивную верстку для e-mail письма.
Проблема в том, что Gmail не поддерживает тег style, в котором должны быть прописаны media queries.
Скажите, как тогда быть?
...
Рейтинг: 0 / 0
31.03.2014, 18:10
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601240
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
тег не поддерживает, а атрибут поддерживает?

попытка нагуглить нашла такое:
habrahabr.ru/post/101120/
...
Рейтинг: 0 / 0
31.03.2014, 18:18
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601264
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Спасибо, я уже второй день гуглю, но ничего толкового не могу найти.
Честно, не совсем понял суть. У нас есть корпоративные e-mail рассылки.
Сверстанное письмо отправляется нескольким сотням тысяч пользователей.
Нам нужно, чтобы в зависимости от ширины экрана, на котором пользователь будет просматривать это письмо, отображался тот или иной вид макета.

Каким образом "встраивание CSS" в HTML может помочь? Ведь в этом случае пользователь получит уже готовый HTML, с готовыми стилями. А нам нужна логика, грубо:
1. Если экран 320 пикселей, шрифт заголовка должен быть 12 пикселей.
2. Если экран 480 пикселей, шрифт заголовка должен быть 14 пикселей.

Ну это утрированный пример.

Или там сам плагин как-то засылается клиенту и срабатывает на его стороне при открытии письма?

PS: вообще, мне удивительно все это! Сейчас эра мобильных технологий и адаптивной верстки. А Гугл не поддерживает медиа кверис ...
...
Рейтинг: 0 / 0
31.03.2014, 18:44
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601273
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
urukhayне совсем понял сутьСуть в использовании атрибута style вместо тэга style. Разумеется, атрибут style придется прописывать везде по много раз, а не один раз в стилях.
...
Рейтинг: 0 / 0
31.03.2014, 18:55
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601341
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
miksoft
Это понятно. Но я и так использую атрибут style.

В какой момент формируется этот атрибут по результатам парсинга css, скажите пожалуйста? в момент отправки письма?
Или парсинг происходит в момент открытия пользователем письма (т.е. на стороне пользователя)?

Если правильно то, что написано в первом случае, тогда я не понимаю, как будет срабатывать логика стилей.
Пользователь получает html с уже сформированными style. Как тогда в зависимости от разрешения его экрана отобразится тот или иной стиль?

Возможно я Вас не совсем правильно понял.
Поясните пожалуйста, буду признателен.
...
Рейтинг: 0 / 0
31.03.2014, 20:54
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601386
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
urukhay,

<style>
@media only screen and (max-device-width: 480px) {
.my-title {font-size:14px}
}
@media screen and (device-width: 320px) {
.my-title {font-size:12px;}
}
</style>
...
Рейтинг: 0 / 0
31.03.2014, 22:24
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601387
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
но я бы на это не закладывалась, используйте % или em
...
Рейтинг: 0 / 0
31.03.2014, 22:26
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601388
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
-k2-,

прочитайте первый пост ещё раз
авторне поддерживает тег style
...
Рейтинг: 0 / 0
31.03.2014, 22:27
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601390
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
Яростный Меч,

это точно? просто у нас вроде рассылка вполне прилично выглядит,
врядлибы она так выглядела, без стилей
...
Рейтинг: 0 / 0
31.03.2014, 22:29
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601413
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
-k2-Яростный Меч,

это точно? просто у нас вроде рассылка вполне прилично выглядит,
врядлибы она так выглядела, без стилейпомимо тега style есть и другие способы указать стили, в т.ч. см. выше.
...
Рейтинг: 0 / 0
31.03.2014, 23:08
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601495
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Так что насчет формирование параметра style?
В какой момент он формируется?
Кто подскажет?

Заранее спасибо!
...
Рейтинг: 0 / 0
01.04.2014, 08:17
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601518
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayВ какой момент формируется этот атрибут по результатам парсинга css, скажите пожалуйста?
Значение у атрибута либо есть, либо их нет. Это определяется контентом самого ДОМ.
Никакой "парсинг ЦСС" тут ни при чем.

Код: html
1.
<div style='color: red;'></div>


Есть значение атрибута

Код: html
1.
2.
3.
4.
5.
6.
<style>
div {
   color: red;
}
</style>
<div></div>


Нет значения атрибута.
Хотя визуально разницы никакой нет...
...
Рейтинг: 0 / 0
01.04.2014, 09:08
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601754
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
miksoft помимо тега style есть и другие способы указать стили, в т.ч. см. выше.
чето я ступила, отучила инлайн стили себя писать :)
...
Рейтинг: 0 / 0
01.04.2014, 12:29
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601815
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
krvsa,
Вы видимо не поняли мой вопрос. Либо я настолько мало сплю, что не понимаю Вас :)

Вопрос был в том, что нужна адаптивная верстка для html-письма. Она реализуется с помощью media-запросов, которые пишутся в теге <style> в шапке html-документа. Т.к. Gmail не поддерживает тег <style>, сл-но в нем не работает адаптивная верстка. Т.е.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<html>
<head>
    <style type="text/css">
        @media screen and (min-width: 640px)
        {
            div { width: 200px; height:200px; border: 1px solid blue; }
        }
    </style>
</head>
<body>
    <div style="width:100px; height:100px; border:1px solid red;">Example</div>
</body>
</html>


в Gmail работать не будет. Я спрашивал, какие есть обходные пути. Мне дали ссылку, но я не понял суть работы того парсера.

Вот, собственно, вопрос остается открытым!
...
Рейтинг: 0 / 0
01.04.2014, 13:14
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38601842
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayВы видимо не поняли мой вопрос. Либо я настолько мало сплю, что не понимаю Вас :)
Это уже решать тебе...
Я лишь ответил на то, что процитировал.

urukhayВот, собственно, вопрос остается открытым!
Тебе сказали выше - указывай размеры в процентах.
...
Рейтинг: 0 / 0
01.04.2014, 13:32
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602350
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Хорошо, а если усложнить пример.
Если при определенных разрешениях нужно скрыть столбец?
Как тогда?
...
Рейтинг: 0 / 0
01.04.2014, 20:07
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602407
Goror
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Goror
Участник
urukhayХорошо, а если усложнить пример.
Если при определенных разрешениях нужно скрыть столбец?
Как тогда?

Узнаёш ширину клиента через JS или отрабатываеш событие onresize и меняеш, примерно так,

хотя там десятки вариантов наверно можно применить..
...
Рейтинг: 0 / 0
01.04.2014, 21:39
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602409
Goror
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Goror
Участник
GororurukhayХорошо, а если усложнить пример.
Если при определенных разрешениях нужно скрыть столбец?
Как тогда?

Узнаёш ширину клиента через JS или отрабатываеш событие onresize и меняеш, примерно так,

хотя там десятки вариантов наверно можно применить..


А... хотя кажется не в тему я это написал, вы тут про оформления писем для почты говорите.. Это не знаю
...
Рейтинг: 0 / 0
01.04.2014, 21:44
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602553
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayХорошо, а если усложнить пример.
Если при определенных разрешениях нужно скрыть столбец?
Как тогда?
не все задачи можно решить при увеличении ограничений... Т.ч. смирись.
...
Рейтинг: 0 / 0
02.04.2014, 08:52
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602554
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayТребуется сделать адаптивную верстку для e-mail письма.
Проблема в том, что Gmail не поддерживает тег style, в котором должны быть прописаны media queries.
Скажите, как тогда быть?
А тег script он поддерживает?
...
Рейтинг: 0 / 0
02.04.2014, 08:53
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602667
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
автор Т.ч. смирись.
Я-то смирюсь )) Но еще есть такой зверь, как заказчик. Он не смирится!

авторА тег script он поддерживает?
Надо проверять. Вы предлагаете решать проблему средствами JS?
...
Рейтинг: 0 / 0
02.04.2014, 10:27
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602687
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayВы предлагаете решать проблему средствами JS?
А разве остались еще варианты?
...
Рейтинг: 0 / 0
02.04.2014, 10:37
| Ответить | Цитировать | Написать  
Media queries и Gmail
    #38602692
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayЯ-то смирюсь )) Но еще есть такой зверь, как заказчик. Он не смирится!
От "надутия щек", в технических вопросах, мало что зависит...
...
Рейтинг: 0 / 0
02.04.2014, 10:38
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Media queries и Gmail
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38601386&tid=1447256]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 166ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 59ms
get tp. blocked users:
 1ms
others: 239ms
total:  512ms
созд. / загр.: 512ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]