Адаптив сайта с нуля до завершения html/css/js Часть 3
Вставка
- Опубліковано 8 вер 2023
- Друзья, третья часть вечеринки. Это адаптив сайта! Погнали дальше!
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
box-sizing: • box sizing border box ...
ХотКей по VScode: • 10 горячих клавиш в VS...
Видео про БЭМ - • БЭМ методология. Практ...
Видос по svg - • SVG, большой гайд
Большой гайд по гридам - • CSS GRID Большое руков...
Все о флексах - • FLEXBOX начало. Флексб...
Продвинутые флексы - • flex-basis, flex-grow,...
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Я ещё 2 уй часть не досмотрел, а тут уже 3ья! Будет чем заняться в эти выходные !!! Спасибо Маэстро за топовый контент !
Браво, маэстро❤ Спасибо за топ контент. Твои марафоны первое средство от осенней хандры.
спасибо
Спасибо большое, с удовольствием смотрю ваше видео.
Отличный урок, спасибо за труд!
Заметка для меня! 23:22
Спасибо за видео урок!
Не доработан список в футоре. Предлагаю такой вариант:
@media (max-width: 465px) {
.footer__list {
padding-top: 60px;
flex-direction: column;
align-items: center;
gap: 20px;
}
}
Спасибо за урок! все как всегда круто!
Почему-то только пришлось дополнительно прописать ширину картинке в хедере в медиа запросе, потому что по другому не сработало и вся вечеринка поплыла, появился горизонтальный скролл , вся картинка не умещалась при 800px примерно. надеюсь мне это потом не окунется, ну вот в след уроке и узнаю)))
топ контентос👍
короче, когда начинаются пляски с бубном между картинкой и тестом
то выбираешь наилучший вариант их дружбы и делаешь скриншот
ну и потом ты радуешься и тебе на всех дизайнеров в мире наплевать, тебе никто настроение не испортит уже
Принципиально надо было делать буквы с наушниками разнослойными через css? Типа Вы решили с парнем и sound запилить один jpg просто, а тут какие-то изощрения происходят, когда реализация адаптива с подобным кажется еще сложнее, чем там...
МЕН,ДЯКУЮ ЗА КОНТЕНТ
дякую
А можно видос по единицам измерения vh?
Благодарю!❤️ Было очень полезно посмотреть как вы анализируете проект и составляете медиа запросы, у меня всегда затупы с этим. Кстати, я до этого по наитию писала медиа запросы в виде media screen and(), но получается можно и без типа устройства. А что даёт тип устройства в медиа запросе? 🤔
screen это компонент который сообщает что правила должны применяться ко всем типам экранов,а слово and связывает воедино набор условий (max-width: 480px)
🤝
Для адаптива надписи на наушниках, я бы использовал wv и %. Как для размера шрифта, так и для позиционирования элементов. Так как изображение сужается от ширины экрана
У меня получилось сделать адаптив, использовал как раз vw для шрифта (но только для медиа запросов (max-width: 1200px), а для контейнера картинки просто задал padding: 0 16.667%. На ширине в 575px поставил еще один медиа запрос и переделал примерно как в видео, так как картинка и шрифт становятся слишком маленькими.
А что у тебя за шрифт? И как его установить?
предыдущий урок
Что делать если при изменении размеров, фотка наушников перекрывает choose color ?
Не, не пойму все тоже самое написал, у меня просто медиа запросы не работают, точнее неправильно. Ну у меня чувак и звук сделаны как у тебя в начале ( бифор и афтер)
Маэстро , у меня проблемы с этим типом , который на футере . На девайсах приходиться долго скроллить вниз . Смотрю на видео ,a у вас все в порядке . Никак не могу понять в чем дело . Что можно сделать с этим типом ?
неверное высота у типа большая, проверь точно ли относительные единицы писал
16:08 40:56 41:10