Оптимизация сайта для планшетов и телефонов - 2 - Страница 3 - Форум об интернет-маркетинге
Этот сайт существует на доходы от рекламы.
Пожалуйста, выключите AdBlock.
Вернуться   Форум об интернет-маркетинге > >
Ответ
 
Опции темы
Старый 23.03.2016, 23:17   #21
nastroen
Дипломник
 
Аватар для nastroen
 
Регистрация: 23.08.2013
Сообщений: 94
Репутация: 7713

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

А обязательно ли упоминание "screen"? Например: @media screen and (max-width:600px)

Google обходится без этого screen и предлагает простое @media(min-width: 468px) в рекомендациях по стилям адаптивного блока.
nastroen вне форума   Ответить с цитированием
Сказали спасибо:

Реклама
Старый 23.03.2016, 23:30   #22
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,346
Репутация: 158815
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

ТопикСтартер Re: Оптимизация сайта для планшетов и телефонов - 2

Цитата:
Сообщение от nastroen Посмотреть сообщение
А обязательно ли упоминание "screen"? Например: @media screen and (max-width:600px)

Google обходится без этого screen и предлагает простое @media(min-width: 468px) в рекомендациях по стилям адаптивного блока.
Действительно интересно, спасибо

Я ориентировался на то, что кроме "screen" есть еще куча других параметров:
http://htmlbook.ru/css/value/media

Цитата:
all - Все типы. Это значение используется по умолчанию.
screen - Экран монитора.
Видимо, пример из Гугла трактуется как all.
__________________
Адаптивный дизайн в 2 строчки (внизу). + Принимаю заказы любой сложности.
Коротко про заработок в сети и эксперименты по продвижению.
DiKiJ вне форума   Ответить с цитированием
Сказали спасибо:
Старый 24.03.2016, 16:14   #23
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,346
Репутация: 158815
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

ТопикСтартер Re: Оптимизация сайта для планшетов и телефонов - 2

Адаптивные таблицы при помощи только CSS стилей 2

Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой:

Цитата:
table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;
}
table tbody {display: table !important;
width: 99.9% !important;}
Здесь я обвожу таблицу рамкой, чтобы было понятнее, что она не обрезана.

Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.
У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку.

Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми.


Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?
Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.
DiKiJ вне форума   Ответить с цитированием
Старый 04.04.2016, 20:29   #24
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,346
Репутация: 158815
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

ТопикСтартер Re: Оптимизация сайта для планшетов и телефонов - 2

Спасибо за отзывы!

Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно.

Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.

А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан:

Цитата:
table {border: 1px solid #333333; display: block !important; width: 99% !important; overflow: auto !important;}
table:before {content: ""; display: table-cell !important; overflow: auto !important; width: 1% !important;}
Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.
А вот добавление table:before c display: table-cell растягивает содержимое на 100%.
Магия

Ну и важный момент про шрифты!
Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.
Да и 12 пикселей - это уже совсем мелко для телефона.
DiKiJ вне форума   Ответить с цитированием
Старый 04.04.2016, 22:07   #25
Ragnarok
Академик
 
Аватар для Ragnarok
 
Регистрация: 26.06.2010
Сообщений: 2,069
Репутация: 299530

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

Цитата:
Сообщение от DiKiJ Посмотреть сообщение
Адаптивные таблицы при помощи CSS стилей 3
запилите онлайн демку?
__________________
//TODO: перестать откладывать на потом
Ragnarok вне форума   Ответить с цитированием
Старый 04.04.2016, 22:27   #26
tommy-gung
Малыш tommy
 
Аватар для tommy-gung
 
Регистрация: 23.11.2006
Адрес: Severodonetsk \ Moscow
Сообщений: 2,585
Репутация: 228124
Отправить сообщение для tommy-gung с помощью ICQ

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

в bootstrap есть пример с обертыванием таблицы дивом - http://getbootstrap.com/css/#tables-responsive
как по мне такой вариант предпочтителен, таблица останется исходной
__________________
> Площадки под статьи недвижимость, строительство, общие тематики. От 50 рублей. В личку
>> Тут был малыш
tommy-gung вне форума   Ответить с цитированием
Сказали спасибо:
Старый 05.04.2016, 23:04   #27
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,346
Репутация: 158815
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

ТопикСтартер Re: Оптимизация сайта для планшетов и телефонов - 2

Цитата:
Сообщение от tommy-gung Посмотреть сообщение
в bootstrap есть пример с обертыванием таблицы дивом - http://getbootstrap.com/css/#tables-responsive
как по мне такой вариант предпочтителен, таблица останется исходной
Конечно предпочтительнее!
Зачем, если можно обернуть все в обычный div со стилями?
Промбема в другом. На сайтах бывают тысячи таблиц. И еще работают редакторы, которым придется отдельно рассказывать все и показывать...

Да, перепроверил прошлый свой пример. Там 1 колонка слишком сильно ужимается. Действительно нужно ставить в стилях ширину для каждой, либо прописать что-то наподобие width: 1%; тогда браузер сам подберет размер. Хотя, не очень люблю этот вариант.

---------- Добавлено 06.04.2016 в 02:45 ----------

Цитата:
Сообщение от Ragnarok Посмотреть сообщение
запилите онлайн демку?
Блин. Я ее удалил уже. Вот сделал вам новую со всеми примерами: http://dikij.com/test2.php
Никаких красивостей и дополнительного кода. Только таблицы и как на них влияют разные стили и методы адаптации.
DiKiJ вне форума   Ответить с цитированием
Старый 06.04.2016, 02:04   #28
plscomeback
Студент
 
Регистрация: 04.04.2016
Сообщений: 12
Репутация: 10

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

Цитата:
Сообщение от DiKiJ Посмотреть сообщение
Решение довольно простое: Мы дополнительно задаем изображению width: 100% (не забываем про height: auto).
Картинка растягивается на весь контейнер и уменьшается вместе с ним. Как минус - нужно очень точно указывать стили, чтобы не растягивать маленькие изображения.
Применил твой совет к логотипу, но лого у меня не простое, а меняется при наведении (Png трюк с прозрачностью) Но вот выплыла проблема, как поставить теперь лого по центру нашего фона? надеюсь поможешь с данной проблемой
plscomeback вне форума   Ответить с цитированием
Старый 06.04.2016, 13:46   #29
awasome
Академик
 
Регистрация: 20.08.2010
Сообщений: 8,348
Репутация: 984786

По умолчанию Re: Оптимизация сайта для планшетов и телефонов - 2

Почему логотипы, да и в целом картинки растягиваются и получаются такими страшными (порой с пикселизацией) в мобильном хроме? У большинства так.
awasome вне форума   Ответить с цитированием
Старый 06.04.2016, 23:06   #30
DiKiJ
Дикий
 
Аватар для DiKiJ
 
Регистрация: 26.05.2013
Адрес: <Noindex>
Сообщений: 1,346
Репутация: 158815
Отправить сообщение для DiKiJ с помощью Skype™
Социальные сети Страница в Одноклассниках Профиль в ВКонтакте Профиль на Хабрахабре Профиль в LinkedIn Аккаунт в Telegram

ТопикСтартер Re: Оптимизация сайта для планшетов и телефонов - 2

Думаю, я и правда могу помочь в обоих случаях. Но я не умею править стили ПО ОПИСАНИЮ

Можно примеры?
DiKiJ вне форума   Ответить с цитированием
Ответ

Метки
адаптация , дизайн , мобильный , отзывчивый




Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход



Текущее время: 06:23. Часовой пояс GMT +3.

Регистрация Справка Календарь Поддержка Все разделы прочитаны