Оптимизация сайта для планшетов и телефонов - 2

В таких случаях используют отрицательный отступ равный 1/2 ширины (width) позиционируемого блока:

#cf img {left: 50%; margin-left: -354px;}

или

left:50%; margin-left:-25%;

Как я понял, мы условно делим картинку пополам, привязываем центр, а привязка будет уже по левому краю (1/2 = -354px).

Сейчас у меня реализовано вот так: https://jsfiddle.net/82nq9jug/7/

Это по сути тоже самое,я попробовал как вы написали, но проблема в том,что при изменении разрешения экрана картинка не меняет свои размеры, она статична.

https://jsfiddle.net/82nq9jug/8/

А точно будет уменьшаться с min-width: 500px; ?

Мне кажется, к #cf img стоит добавить max-width: 75%; left:50%; margin-left:-25%;

Чтобы уменьшалось само.

Вообще я не люблю петь кому-то дифирамбы... но, видимо, тут я не удержусь.

Считал "мобайл-френдли" оптимизацию сайта малозначимой (для себя лично). Но сейчас занят одним англоязычным проектом, на котором мобильного трафика ожидается 40-50%. Пришлось заморочиться. В итоге... сейчас 6:45 утра, а я еще не ложился. Так как наблюдал за работой Андрея над моим сайтом и не мог оторваться )) Реально! Теперь даже не знаю, какая версия сайта мне больше нравится: десктопная или мобильная. Очень доволен! Работа стоит своих денег однозначно. Кроме того, ТС приятен в общении и склонен к диалогам. Ещё раз спасибо от души за качественную работу! И всех благ :)

Тёма лебедев помните что про это сказал? http://www.artlebedev.ru/kovodstvo/sections/182/

Если кто-то ещё разделяет эти версии сайта, или адаптирует для мелкой части устройств, он занимается чем-то вчерашним.

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

Да вот что-то у половины нет прав на это...

Ну и чтобы дважды не писать. Встретил тут на одном форуме код "как уменьшить весь сайт при уменьшении ширины экрана".

Написал свою версию для примера. Так делать не нужно! 🤪

Без использования зума, так как он не кроссбраузерный вообще.

Тут все просто. Нет прав - нет отзывов. А попытка опубликовать отзыв вне коммерческого раздела - это нарушение пункта 3.9 правил форума. Так что любой отзыв, появившийся здесь, получит 8 баллов штрафа и будет удален. Доведите это до желающих его оставить. Если же они будут, не смотря на это, упорно желать оставить свой отзыв именно здесь - то и вся тема, к сожалению, пойдет в утиль.

wolf, спасибо, предупредил.

Я тут уже писал, что max-width не работает в Firefox и IE 11 для изображений в таблицах.

Вот все решения, которые удалось найти:

1) Прописываем width: 100% изображению. Только я советую добавить height: auto. В идеале, можно прописать max-width с max-height. И в них указать размер картинки. max-height тут нужен для старых браузеров, в основном.

2) Добавить таблице table-layout: fixed. Это просто магия. Картинки начинают корректно ужиматься сами.

3) Можно вообще полностью избавиться от таблицы, прописав ячейкам display: block. Бывает очень удобно, если таблица с 1 ячейкой (td) или они друг под другом.

4) В интернете прочитал, что можно поместить картинку в контейнер и прописать ему максимальные значения картинки. Но вот зачем - я не понимаю. Проще уж как в 1 пункте.

Сразу добавлю, что по спецификации max-width не работает и для самой таблицы. Но тут уж совсем просто. Достаточно обернуть таблицу в DIV и ему прописать максимальную ширину.

Кто-то может покидать статистику. Что вообще в ней происходит после подключения адаптива или мобильной версии?

Сегодня просто увидел красоту:

Но вдруг на выборке 10 - 20 сайтов все не так красиво.

А вообще, интересно было бы еще на траффик глянуть.

В идеале - из обычного поиска и из мобильного. Довно уже мучают вопросы разные :)