Что делать если изображения, вставленные в разметку с помощью тега img, при изменении размера viewport'a меняются на другие? Например: bg-back-mobile@1x.jpg меняется на bg-back-tablet@1x.jpg? Убирать из разметки img теги и использовать CSS со свойством background?
В проекте Мишка в шапке в зависимости от экранной версии разные изображения логотипа. По стайлгайду логотип автоматически перекрашивается в зависимости от состояния, кроме того это контентное изображение, а значит это не фоновое изображение. Но в html коде мы можем загрузить одно изображение, чтобы не дублировать код. Будет ли рассмотрен в материалах этот случай?
Об этом мы поговорим очень подробно на лекции про адаптивную графику. Сейчас ответим коротко. Для этого есть атрибут srcset. Пример можете посмотреть тут.
Есть более продвинутая возможность - использовать тег <picture>. Об этом мы тоже поговорим очень подробно в следующей лекции.
Как лучше всего работать с десктопной версией? Часто работаю с ноутбука, но ширина экрана меньше, чем брейкпоинт для десктопа, и при запуске сборки отображается планшетная. Я конечно решил проблему подключением монитора (либо просто работать с компа). Но чисто с ноутбука не получается (если только явно задать ширину 1440 при переключении в девтулс на мобильной версии)
Вариантов несколько.
- Уменьшить размер сайта с помощью масштабирования
ctrl+-. - Уменьшит масштабирование во всей операционной системе. Для этого нужно зайти в настройки дисплея вашей ОС.
- Зайти в developer tools(панель разработчика) в браузере. Включить панель девайса(
ctrl+shift+m) и выбрать нужное разрешение.