Category: Адаптивная верстка

29
Мар
2020

Адаптировать изображение под смартфон

Есть одно изображение для компьютера ,а второе для мобильной версии. Как скриптом или css указать чтоб если нужно разрешение для компьютера то подставляло один файлик с изображением,а если меньше то подставляло файлик с изображением для мо…

20
Мар
2020

Адаптивный сеточный макет журнала с помощью всего 20 строк CSS

От автора: недавно я работал над современной версией блогролла. Идея заключалась в том, чтобы предложить читателям подборку последних постов из этих блогов в макете в стиле журнала, а не просто выложить список любимых постов в боковой панели. Легкой частью было получение списка постов с выдержками из избранных RSS-каналов. Для этого мы использовали плагин WordPress, Feedzy […]

28
Фев
2020

ResizeObserver — новый мощный инструмент для адаптивного Веб

От автора: слово «адаптивный» — это то, что мы часто даже не упоминаем, потому что в наши дни это уже стандарт в веб-разработке. Существует огромное количество различных экранов, и их число постоянно растет. Мы хотим иметь возможность поддерживать все возможные размеры и при этом сохранять хороший пользовательский опыт. И медиа-запросы CSS — отличное решение данной […]

17
Дек
2019

Разница между разрешением CSS и разрешением устройства

От автора: во время работы я видел, как многие веб-разработчики изо всех сил пытались понять, как в веб-браузерах обрабатывать пиксельные единицы в мире экранов высокой плотности. В наши дни экраны высокой плотности и retina экраны есть на всех мобильных устройствах. Это в дополнение ко многим размерам экрана, с которыми мы имеем дело: мобильные телефоны, планшеты, […]

27
Ноя
2019

Медиа-запросы CSS — это не только max-width

От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, […]

08
Май
2019

Адаптивные изображения с CSS

От автора: в этом видео будут рассмотрены некоторые проблемы при работе с адаптивными изображениями на сайте. С указанными проблемами вы, скорее всего, уже сталкивались в своей практике и, скорее всего, в вашем арсенале имеются варианты решения данных проблем. Данное видео – это просто попытка обобщения некоторых из этих вариантов и попытка показать способы работы с […]

21
Янв
2019

Как создать галерею изображений с помощью CSS Grid

От автора: галереи изображений на таких сайтах, как Unsplash , Pinterest и т.д., созданы с помощью методов позиционирования или перевода элемента изображения, которые являются очень сложными. Вы можете достичь того же очень быстро, зная, как делается в CSS Grid галерея. Например: Вверху находится галерея изображений с изображениями различной ширины и высоты, которая идеально подходит для […]

04
Дек
2018

Несоответствующие медиа-запросы CSS: почему браузеры загружают их

От автора: на днях я прочитал статью Дарио Гизелара по оптимизации кода путем удаления неиспользуемых медиа-запросов CSS. Одна из основных мыслей заключается в том, что вы можете использовать атрибут media при включении таблиц стилей. [crayon-5c561418e5bdc260789152/] В этой статье Дарио ссылается на набор тестов загрузки CSS по медиа-запросам Скотта Джеля, в котором Скотт показывает, как браузеры […]

31
Май
2018

Размышления на тему: CSS Grid Layout или CSS-фреймворки?

От автора: благодаря передовым технологиям CSS, таким как CSS Grid Layout и Flexbox, кодирование макета веб-страницы стало значительно проще. Если добавить к этому, что поддержка браузерами как Grid, так и Flexbox тоже очень хороша, тогда возникает вопрос: зачем изучать и использовать CSS фреймворки? В этой статье я рассмотрю Bootstrap, так как это, возможно, одна из […]

31
Май
2018

Адаптивные таблицы CSS, новый взгляд

От автора: многие люди работают с гибкими таблицами. Обычно идея заключается в том, чтобы превратить таблицу в пары ключ-значение, чтобы ячейки становились строками. Тогда у нас было бы всего 2 столбца, которые вписываются в любой экран. Это и есть адаптивная таблица CSS. Однако это означает, что заголовки таблиц теперь должны повторяться для каждой строки. Существующие […]

17
Май
2018

Без труда читаемый адаптивный текст с помощью единиц измерения на основе окна просмотра

От автора: с тех пор как я создал BigText более семи лет назад, я был немного одержим красивым большим текстом. К сожалению, в моем собственном блоге заголовки были, если честно, не совсем выразительными. Я хотел немного подправить их и перейти от фиксированных размеров текста к динамическому — сделать адаптивный текст, который увеличивается с увеличением окна […]

14
Мар
2018

Понимание медиа-запросов в электронной почте HTML

От автора: дизайнеры электронной почты давно стремятся создавать кампании для каждого устройства. Особенно сегодня, когда примерно половина всех открытий электронной почты происходит на мобильных устройствах, важно разработать решение, которое хорошо подходит для разных устройств. Хотя это всегда было сложной задачей (и до сих пор для некоторых почтовых клиентов), медиа запросы могут её облегчить. Но, если […]

14
Мар
2018

Адаптивные элементы DOM: решение проблемы с запросами контейнеров

От автора: запросы контейнеров — это предложение, которое позволит веб-разработчикам создавать DOM элемент на основе размера содержащего элемента, а не размера окна просмотра браузера. Если вы веб-разработчик, то, наверное, раньше слышали о запросах контейнеров. Примерно до тех пор, пока у нас был отзывчивый веб-дизайн, у нас были разработчики, просящие их (изначально запрос элементов, а затем […]

12
Мар
2018

Как сделать адаптивность максимально простой с помощь CSS переменных

От автора: для тех, кто не слышал про CSS переменные – это новая функция CSS, которая позволяет использовать всю мощь переменных в стилях без настроек. По факту, CSS переменные позволяют уйти от старого способа написания стилей: [crayon-5c561418e6706364552131/] … в пользу: [crayon-5c561418e670a861852932/] Синтаксис может показаться немного странным, но теперь вы можете менять размер шрифта во всем […]

02
Мар
2018

Использование медиа запросов CSS в адаптивном дизайне в 2018

От автора: в июле 2010 я написала статью на Smashing Magazine «создание мобильной версии сайта с помощью CSS3 медиа запросов». Прошло почти 8 лет, а статья все еще привлекает большой трафик. Я подумала, что было бы неплохо вернуться к этой теме теперь, когда у нас есть такие методы макетирования, как Flexbox и Grid Layout. Статья […]

04
Апр
2017

Отладка адаптивности интерфейсов в CSS

От автора: свойства CSS и значения, запускающие перестройку, довольно сильно влияют на производительность. Они могут замедлить адаптивность интерфейсов (рендеринг страницы, плавность анимации и производительность во время прокрутки страницы). Спад особенно заметен на слабых устройствах типа смартфонов и смарт тв. Что такое перестройка? Перестройка – это операция изменения макета всей страницы или ее части. В качестве […]