sdanilas
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by sdanilas
-
-
Здравствуйте!
Нужно сделать вёрстку группы кнопок - меню сайта.
Идея такая - до 480 px показывать это меню в виде вертикального столбца по 1 кнопке в ряд, ширина каждой кнопки на всю страницу.
От 480 до 768 показывать кнопки по 2 штуки в ряд.
А от 780 показывать все кнопки в 1 ряд, без переноса. При этом менять размер шрифта и размер кнопок так чтобы они всегда вписывались в одну строку. Т.е. если кнопок много или ширина экрана маленькая, то пусть показываются хоть шрифтом 6 px. Если экран широкий или кнопок мало, то пусть кнопки будут крупные, а надписи внутри них будут хоть 20 px.
Вроде бы всё реализуемо на CSS кроме показа в 1 строку. Не понятно как вычислять размер.
Был бы очень признателен за подсказку куда копать. А может быть кто-то такой пример вживую вспомнит и даст ссылку?
-
1 час назад, npofopr сказал:
Не поверите, но у media есть и портретный и ладшафтный режимы http://htmlbook.ru/css/value/media
Наверно, я плохо описал трудность. Конечно, я знаю про режимы. Попробую на картинке Смотрите, на десктопе есть макет в 1440 - это слева. Клиент хочет чтобы когда я открыл его на десктопе 1280 или планшете в лендскейп, то увидел макет смасштабированным - на моём рисунке справа. Т.е. никаких переносов блоков, изменения размеров отдельных блоков - всё просто должно масштабироваться как будто бы я обычный сайт с одним только разрешением 1440 открыл на планшете с установленным вьюпортом на 1024. Только тут ещё и отдельная мобильная версия макета страницы есть, которая должна наоборот увеличиваться для тех экранов, что больше 320, но меньше портретного планшета.
-
Дизайнер клиента придумал такой креатив. Есть 2 макета страницы - мобильный вид (320 px) и десктопный (1440 px).
По его задумке, на устройствах до портретной ориентации планшетов должен показываться мобильный вид. Т.е. открываем на ipad в портретной ориентации - видим на весь экран мобильный вид. Открываем на десктопе или ipad в ландшафтном положении - видим десктопный. При этом нет адаптива - оно всё должно просто zoom-иться (как будто я неадаптивный сайт смотрю с указанным для него viewport) - т.е. на упомянутом ipad страница уменьшается чтобы вписаться в устройство. Такое вообще реализуемо? Два viewportа прописать, понятно, нельзя. Менять его от @media - тоже. Можно, наверное, извратиться, и подменять его через JS под размер окна браузера пользователя, но это как-то не правильно, ИМХО.
Может быть есть какие-то другие приёмы? -
Здравствуйте!
Кто-то верстал e-mail рассылки с адаптивными картинками?
Столкнулся с такой проблемой. Картинка адаптивится корректно почти во всём зоопарке почтовиков, платформ и браузеров. Но в gmail на android (браузерная версия) переопределяется свойство max-width. Gmail ограничивает ширину картинки чтобы не было горизонтального скрола, но значение он подставляет не корректное. В итоге появляется горизонтальный скролл. Что интересно - в приложении gmail на android всё корректно - проблема только в браузерной версии.
Думал что у меня наверстано как-то криво (не мооооожет быть, но вдруг :D) - поглядел на пример популярной рассылки от игрового сервиса Steam - на ней такая же беда, картинка получает свой не корректный max-width и тоже появляется скролл.
Это глюк gmail ли особенность? Кто-то сталкивался с задачей вёрстки адаптвных картинок в рассылках? Всякие популярные шаблоны типа Cerberus не помогают.
-
А у меня тоже вопрос. Кто-то может подсказать работающий аналог masonry, но с поддержкой сортировки элементов? Есть ordered masonry, но он в статусе бета уже 3 года и он глючит - в списке с парой сотен элементов начинают сползать колонки.
Из ссылок в теме половина не работает уже. А в остальных вроде бы просто компоновка элементов, без сортировок.
lazyload на чистом javascript
in JavaScript
Posted
А он умеет использовать кеш браузера? Т.е. не подгружать через lazy load картинки, коорые ранее уже были сохранены в кеше браузера?