До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.
Адаптивный дизайн довольно молодая «тема» - радует что Майл.ру начали её использовать, т.к до недавнего времени вся вёрстка проектов угнетала своей несовершенностью и отсутствием доступности. Всё здорово , так держать - это верное направление!
Анечка умничка. Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать))
На мой взгляд как раз таки адаптивность страницы влияет на количество привлекаемой аудитории Если ты зашел на сайт с необходимой информацией, а он просто не удобен в навигации, то ты уйдешь с него очень быстро.
пишу из будущего, где всё делается наоборот сначала я зарегистрировался на участие в новогодней битве 2021 от htmlAcademy, а потом нашёл твоё видео, которое было сделано год назад, а оно, как видишь, всё ещё актуально
Вроде все понятно, все делаешь, как в видео, которые пересмотрел уже не одно. Но присутствует одно НО - есть у меня страничка с навигационной панелью, которая обвернута в блок и имеет фон, скажем зеленого цвета. Задаю параметры, начинаю сжимать, блоки постепенно и равномерно располагаются на странице. Но начиная с 600 пикселей навигационное меню располагается равномерно по ширине экрана, а сам блок, в котором оно находится, становится меньше ширины экрана, т.е справа начинает проявляться длинная полоса фона body. И чем сильнее мы начинаем сужать экран, тем сильнее она начинает проявляться и по итогу при 320 пикселях происходит следующее - Вкладки из навигационного меню расположены равномерно по ширине экрана, а вот сам блок, в который они завернуты почему-то по ширине занимает только половину ширины экрана, т.е 160px. И как я писал ранее, этот блок имеет фон, что по итогу имеет весьма странный вид, пол экрана фона от навигационного блока, пол экрана фона от body, а по середине навигационные вкладки, которые вышли за рамки своего блока. И вот вопрос - почему вкладки из навигации равномерно растягиваются по заданной ширине, а блок, в котором они находятся, какого-то черта принимает только половину ширины.
Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать...
Анна, а подскажите пожалуйста сервисы или инструменты для теста сайта под разными андроидами от 5 до 9 и разными мобильными браузерами. Устанавливать на ПК кучу эмуляторов неохота. Проблема в том что ВордПресс премиум темы с енванто, ведут себя по-разному, особенно на стоковых браузерах, приходится править вёрстку под старые андроиды. Благо мобильный хром отображает на всех версиях андроида одинаково.
Благодарю за видео. Вопрос такой: как делать адаптивность удобнее, после того когда сверстал всю страницу с макета, или может сразу, после создания каждого блока?
А как получается такое что делаешь адаптив,берешь конкретные значение например из Boostsrap 1200,992 и тд.. когда в media ставишь тот же 992 ничего не происходит,а при 991 уже начинаются изменения? Хотя даже если повторяешь верстку за кем то и всегда такая проблема,точные значения не работают только на 1пх меньше?
Привет, уже есть сервисы, которые делают это по фото и прочему, но до сих пор нет совершенного продукта, тк есть вещи, которые способен решить только человек)
Типичный Верстальщик • Анна Блок , да я слышал и про сервисы, и про недоработку данной ИИ. Я не совсем правильно поставил вопрос. Готовы ли вы к тому, когда ИИ, по данной теме, доведут до ума? Если да, то как? 🤔
Анна добрый вечер. Не знаю, связано ли это с покупкой нового мака или близким расположение петлички, но очень сильно слышны удары по клавиатуре. Пожалуйста, можно не надо?
Об этом я кстати рассказывала в видео про единицы измерения ua-cam.com/video/dPzoBD2Z68A/v-deo.html 😄 Однако это проще, чем перераспределять все значения px, особенно если много блоков и страниц на сайте
Чего-то сколько ни смортю про адаптивность - никто не объясняет что будет, если у мобильника высокое разрешение экрана. Не размер, а плотность пикселей. Например при ширине от 1024 то уже считается что у пользователя в руках ноутбук.. Но у того же айфона разрешение 2532 × 1170, при небольшом экране. И что ему отгрузится??? версия сайта для ноута, ? Опорная точка в 1024 - и пользователю отгрузится версия для ноутбука???!! Хоть бы кто прояснил этот вопрос...
Ходят слухи, что из-за того, что у мобильных устройств ресурсов меньше, лучше делать вёрстку mobile first, так как она менее ресурсоёмкая для данных устройств.
Не совсем слухи, скорее очевидный факт) Но скорость интернета сейчас порой не сильно уступает скорости Wi-Fi, как и мощности по сравнению с ПК, поэтому каждый проект нужно рассматривать индивидуально.
во первых девушка очень красивая и голубые глаза так и притягивают к себе, поэтому пять минут видео я просто смотрел на нее, а не слушал... во вторых видео ролик очень подробный и важный для веб мастеров, но я не настолько профи
До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.
❤️
Спасибо огромное за видео, теперь для меня решены многие мои проблемы в вёрстке.
Адаптивный дизайн довольно молодая «тема» - радует что Майл.ру начали её использовать, т.к до недавнего времени вся вёрстка проектов угнетала своей несовершенностью и отсутствием доступности.
Всё здорово , так держать - это верное направление!
как приятно смотреть на красивую умную девушку , лайк поставил однозначно, и спасибо за труды=)
Аннушка, спасибо, будь счастлива.
Анна, расскажите пожалуйста как правильно вставлять картинки чтобы при адаптиве они не ломались и выглядели хорошо! Спасибо!
Интересный ролик, сразу видно мастера своего дела. Просто супер!
Анечка умничка. Как всегда, все просто и доходчиво. Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме. А то автофокус иногда не успевает отработать))
Спасибо, что так подробно провели разбор типичных ситуаций на практике.
Очень интересный ролик. Благодаря Вам я узнал массу полезной информации.
Да, обзор очень полезный и нужный, много необходимой информации предоставили, которую можно использовать на практике.
Привет:) Спасибо за видео! С наступающим!) Достижения новых высот в новом году💪🏻
Спасибо большое 😊
На мой взгляд как раз таки адаптивность страницы влияет на количество привлекаемой аудитории Если ты зашел на сайт с необходимой информацией, а он просто не удобен в навигации, то ты уйдешь с него очень быстро.
Большое спасибо за видео, и отдельное спасибо за шпаргалку :)
Спасибо за видео. Очень актуально для меня
пишу из будущего, где всё делается наоборот
сначала я зарегистрировался на участие в новогодней битве 2021 от htmlAcademy, а потом нашёл твоё видео, которое было сделано год назад, а оно, как видишь, всё ещё актуально
Вроде все понятно, все делаешь, как в видео, которые пересмотрел уже не одно. Но присутствует одно НО - есть у меня страничка с навигационной панелью, которая обвернута в блок и имеет фон, скажем зеленого цвета. Задаю параметры, начинаю сжимать, блоки постепенно и равномерно располагаются на странице. Но начиная с 600 пикселей навигационное меню располагается равномерно по ширине экрана, а сам блок, в котором оно находится, становится меньше ширины экрана, т.е справа начинает проявляться длинная полоса фона body. И чем сильнее мы начинаем сужать экран, тем сильнее она начинает проявляться и по итогу при 320 пикселях происходит следующее - Вкладки из навигационного меню расположены равномерно по ширине экрана, а вот сам блок, в который они завернуты почему-то по ширине занимает только половину ширины экрана, т.е 160px. И как я писал ранее, этот блок имеет фон, что по итогу имеет весьма странный вид, пол экрана фона от навигационного блока, пол экрана фона от body, а по середине навигационные вкладки, которые вышли за рамки своего блока. И вот вопрос - почему вкладки из навигации равномерно растягиваются по заданной ширине, а блок, в котором они находятся, какого-то черта принимает только половину ширины.
Обзор очень полезный и нужный, много хорошей информации.
Как всегда, все просто и доходчиво.
Маленькое пожелание - при съемке ролика фокусировку лучше настраивать в ручном режиме.
А то автофокус иногда не успевает отработать...
Вообще умница! Вот это я понимаю видео!
Интересно было узнать, как работать с адаптивностью сайта. Спасибо за Ваши советы!
Спасибо за видео! ☺️
Большое вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов на ютьюб и в жизни! От меня ловите лайк.
Спасибо за видео, очень помогло)
Отличное видео, очень хороший разбор, будет полезным ;)
Анна, а подскажите пожалуйста сервисы или инструменты для теста сайта под разными андроидами от 5 до 9 и разными мобильными браузерами. Устанавливать на ПК кучу эмуляторов неохота. Проблема в том что ВордПресс премиум темы с енванто, ведут себя по-разному, особенно на стоковых браузерах, приходится править вёрстку под старые андроиды. Благо мобильный хром отображает на всех версиях андроида одинаково.
browserstack.com
Да вы сами тут такой интенсив устроили что после вас хоть сразу в бой. Спасибо за видео
Спасибо за видео!
Спасибо за интересные видосы. Очень помогают, особенно если ты только начинающий верстак))
А какой лучше всего использовать Mobile first или Desktop first ?
Очень круто!! Спасибо :)
Отличное видео, очень хороший разбор
Однозначно-лукас!
лучшее обьяснение
Понятно и детально спасибо
Подскажите, пожалуйста, что за шрифт использовался при объяснении структуры media запроса?
Geometria
спасиба за отличную и полезную информацию!!!
Благодарю за видео. Вопрос такой: как делать адаптивность удобнее, после того когда сверстал всю страницу с макета, или может сразу, после создания каждого блока?
Я делаю адаптив только после верстки всей страницы
Я думаю так, как тебе удобнее. Попробуй так и так, и определись.
я делаю после каждого блока его адаптивность
Анна, а как можно менять текст при переходе из одной версии в другую?
С Наступающим Новым Годом.
А как получается такое что делаешь адаптив,берешь конкретные значение например из Boostsrap 1200,992 и тд.. когда в media ставишь тот же 992 ничего не происходит,а при 991 уже начинаются изменения? Хотя даже если повторяешь верстку за кем то и всегда такая проблема,точные значения не работают только на 1пх меньше?
А что делать с широкими блоками?
А как ты собираешь пункты меню в бургер-меню для моб. устройств? С помощью Js?
Собирается через css, а через Js делается открытие меню при нажатии на кнопку(ну или с помощью чекбокса)
Привет. Слышал как то, что скоро ИИ будет верстать сайтики. Готовы ли вы к этому? Если да, то как? 🤔
Привет, уже есть сервисы, которые делают это по фото и прочему, но до сих пор нет совершенного продукта, тк есть вещи, которые способен решить только человек)
Типичный Верстальщик • Анна Блок , да я слышал и про сервисы, и про недоработку данной ИИ. Я не совсем правильно поставил вопрос.
Готовы ли вы к тому, когда ИИ, по данной теме, доведут до ума? Если да, то как? 🤔
Aleksejs Aleksejevs человек без работы никогда не останется)
Пока заказчики не научатся чётко,подробно и правильно ставить ТЗ этого не произойдёт.А этому они не научатся никогда))
спасибо очень интересная инфа
малопонятно, и у телефона и у монитора и у планшета идет одно и тоже FullHD расширение, и как быть в таком случае?
все ясно спасибо!
Необычно видеть такую умную девушку в этой отрасли.
Спасибо детка !
Спасибо!
А ссылка на codepen есть?
Случайно закрыла браузер и забыла сохранить, но постараюсь восстановить материал из видео 😄
@@annblok_webdev Спасибо! С Наступающим Вас новым годом! Спасибо за Ваш труд!:)
Спасибо, вас тоже 😊
Анна добрый вечер. Не знаю, связано ли это с покупкой нового мака или близким расположение петлички, но очень сильно слышны удары по клавиатуре. Пожалуйста, можно не надо?
Добрый вечер. Ок, учту в следующих видео 👍
Thank you
Спасибо!
самое сложное в адаптивке у меня было это, расчёт rem и em все остольное изи
Об этом я кстати рассказывала в видео про единицы измерения ua-cam.com/video/dPzoBD2Z68A/v-deo.html 😄 Однако это проще, чем перераспределять все значения px, особенно если много блоков и страниц на сайте
nice!
Блин, в чем вы это делаете? Мне очень понравилось когда сразу хтмл сиэсэс и сразу вид страницы!
Сайт Codepen
@@annblok_webdev спасибо, надо ещё среди линуховских редакторов посмотреть. Я думаю там найдётся достойный софт для разработчика.
Чего-то сколько ни смортю про адаптивность - никто не объясняет что будет, если у мобильника высокое разрешение экрана. Не размер, а плотность пикселей. Например при ширине от 1024 то уже считается что у пользователя в руках ноутбук.. Но у того же айфона разрешение 2532 × 1170, при небольшом экране. И что ему отгрузится??? версия сайта для ноута, ? Опорная точка в 1024 - и пользователю отгрузится версия для ноутбука???!! Хоть бы кто прояснил этот вопрос...
Ходят слухи, что из-за того, что у мобильных устройств ресурсов меньше, лучше делать вёрстку mobile first, так как она менее ресурсоёмкая для данных устройств.
Не совсем слухи, скорее очевидный факт) Но скорость интернета сейчас порой не сильно уступает скорости Wi-Fi, как и мощности по сравнению с ПК, поэтому каждый проект нужно рассматривать индивидуально.
@@annblok_webdev С батареей только печалька.
почему то смотря на девушку не могу уловить смысл ее разговора.очень красивая девушка.
OCHEN INTERESNI KONTENT ZASLUJIVAET MILION PROSMOTROV.
в mobile first узнали как верстать
АВЕ тебе ^_^
It-принцесса
во первых девушка очень красивая и голубые глаза так и притягивают к себе, поэтому пять минут видео я просто смотрел на нее, а не слушал... во вторых видео ролик очень подробный и важный для веб мастеров, но я не настолько профи
Спасибо!