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