Почему вы говорите, что планшетной версией 720 можно пренебречь и просто вместо нее использовать мобильную версию 375. А вот 1140 почему то пренебречь нельзя и использовать вместо нее 960? Там разница всего 180px, это по всего по 90px отступ по сторонам. А для больших экранов вообще не надо делать, и огромные "уши" по бокам уже вроде как не мешают ) В чем логика?
и то и другое -- адаптив (в общем понимании), просто "резиновый" адаптив не фиксирован в рамках фазы. Первый оставляет поля до следущего фазового перехода, а второй посредством *min/*max и calc плавно подползает от фазы до фазы. Это как масло при нагреве: сначала мягчает, но потом "сламливается" и топится почти моментально. А вот у льда такой мягкой градации нет при подходе к фазовому переходу (или она крайне узкая, эта маржа, пренебрежительно малая). А вообще есть разделение на адаптивный/отзывчивый/прогрессирующий дизайн. Это не взаимоисключающие понятия, но взаимосвязанные. Если адаптив занят вопросами ширины экрана, но может не включать в себя событие изменения этой ширины (для устройств, где есть понятие окна приложения или видоискателя), то для отзывчивого -- просто обязательно обрабатывать всякие изменения и взаимодействия. Прогрессирующий интерфейс -- таковой, что предусматривает прогрессивную подгрузку компонентов после первичной загрузки пейлоуда, обработку проблем "изящного регресса"/"изящной деградации". Эти понятия имеют области пересечения, которые представлены диаграммой трех пересекающихся кругов (классика: "цена-качество-скорость диаграмма"), любые точечные аспекты можно разместить на ней.
С шириной все понятно. А вот у меня вопрос как быть с высотой? Я нигде не могу найти информации о высоте экрана ? ведь нужно что б контент нормально смотрелся все важные элементы помещались на главном экране. Подскажите кто знает ?)) вот меня интересует планшетная версия . ширина 960, а высота одного экрана ?)
я в сети тоже не нашла на этот вопрос ответа. Думаю, надо ориентироваться на высоту разрешения экрана, под который делаешь макет, минус меню браузера и адресная строка. То есть, для экрана 1024х 768 , это где то не более 670 рх блок
Если экран больше за 1200px, то контейнер под контент в бутстрап имеет ширину 1170px, но при использовании внутри контейнера колонок ( сетка бутстрап 12 колонок), то ширину из за отступов в колонках станет меньше на 30px, из за мерджинов в колонках и будет контейнер тогда 1140px, но если колонки поместить в div с классом row, то контейнер остается 1170px, так как row добавляет по -15px (30px) и контейнер снова 1170px. (Верстаю уже 2 год)
У нас видео о том как делать макет и его дизайн, а не как верстать. Твои 1170 не делятся на 12 колонок без остатка и новичкам будет сложно рассчитать сетку под эту ширину. Не путай новичков пожалуйста заявлениями «в видео неверно». Всё там верно.
Привет, Максим. Очень интересует один вопрос. Казалось бы, должно быть понятно, но уже несколько дней не могу сам до конца разобраться и вот решил спросить: Понимаю, что когда речь идет о дизайне мобильних приложений на телефоны, планшеты и тд, мы используем систему едениц измерения в логических пикселях. В XD, Figma і тп. все изначально заточено под логичиские ( условные пиксели) и это логично. Скорее всего что такое ( типо с умножением 1х или 2х ) есть и для дизайна сайтов. Но, лонг стори шорт, когда речь идет, к примеру, о бутстрапе, где ширина рабочей (контентной) области составлет ( или составляла раньше) 1140 px, то о каких пиеселях ми говорим? Физических или условных? Ведь если делать в Фотошопе, то ми навернека используем физичиские. А потом просто експортируем два макета в 1х и 2х ? Большое спасибо!
Кстать меня одна вещь напрягает в адаптивном дизайне. Когда открываешь firebug, то врубается адаптивная версия на большинстве сайтот (если файрбаг в режиме "docked" а не "float")
У нас видео о том как делать макет и его дизайн, а не как верстать. Твои 1170 не делятся на 12 колонок без остатка и новичкам будет сложно рассчитать сетку под эту ширину. Не путай новичков пожалуйста заявлениями «в видео неверно». Всё там верно.
320 используется повсеместно. Те кто пишет, якобы отказываемся от 320, поймите одну вещь. Это не вы навязывание людям свои размеры, это используемые в ходу устройства указывают нам верстальщикам под какие экраны верстать. И мы подстраивается.
я бы по поводу английского произношения вообще не заморачивалась. Читала бы, как написано. Дебильный язык. Изучаешь правила,а потом так бац! а ты не так это слово прочитал. Это слово находится в исключениях из правил. ДА? и сколько там этих слов вне правила? Да так, половина.... Занавес. Логики, каждое слово изучать отдельно нету! Жаль, что Непобедимую Армада подкачала. Сейчас бы во всем мире испанский правил. Самый легкий и понятный язык для изучения.
Где
Можно посмотреть урок по самому адаптиву в фигме?
Очень интересный и полезный урок. Узнал для себя много нового. Жду продолжения урока по адаптивному дизайну в figma.
Да, тоже работать начал в Figma/ Поддерживаю!
Лайк
Почему вы говорите, что планшетной версией 720 можно пренебречь и просто вместо нее использовать мобильную версию 375. А вот 1140 почему то пренебречь нельзя и использовать вместо нее 960? Там разница всего 180px, это по всего по 90px отступ по сторонам. А для больших экранов вообще не надо делать, и огромные "уши" по бокам уже вроде как не мешают ) В чем логика?
очень хорошо и даже наглядно объяснили розницу между адаптивным дизайном и " резиной! спасибо!
и то и другое -- адаптив (в общем понимании), просто "резиновый" адаптив не фиксирован в рамках фазы. Первый оставляет поля до следущего фазового перехода, а второй посредством *min/*max и calc плавно подползает от фазы до фазы. Это как масло при нагреве: сначала мягчает, но потом "сламливается" и топится почти моментально. А вот у льда такой мягкой градации нет при подходе к фазовому переходу (или она крайне узкая, эта маржа, пренебрежительно малая). А вообще есть разделение на адаптивный/отзывчивый/прогрессирующий дизайн. Это не взаимоисключающие понятия, но взаимосвязанные. Если адаптив занят вопросами ширины экрана, но может не включать в себя событие изменения этой ширины (для устройств, где есть понятие окна приложения или видоискателя), то для отзывчивого -- просто обязательно обрабатывать всякие изменения и взаимодействия. Прогрессирующий интерфейс -- таковой, что предусматривает прогрессивную подгрузку компонентов после первичной загрузки пейлоуда, обработку проблем "изящного регресса"/"изящной деградации". Эти понятия имеют области пересечения, которые представлены диаграммой трех пересекающихся кругов (классика: "цена-качество-скорость диаграмма"), любые точечные аспекты можно разместить на ней.
С шириной все понятно. А вот у меня вопрос как быть с высотой? Я нигде не могу найти информации о высоте экрана ? ведь нужно что б контент нормально смотрелся все важные элементы помещались на главном экране. Подскажите кто знает ?)) вот меня интересует планшетная версия . ширина 960, а высота одного экрана ?)
я в сети тоже не нашла на этот вопрос ответа. Думаю, надо ориентироваться на высоту разрешения экрана, под который делаешь макет, минус меню браузера и адресная строка. То есть, для экрана 1024х 768 , это где то не более 670 рх блок
100vh для блока задаёшь и он будет на всю высоту экрана, а уже внутри раскидывай
А ширина то 1170px сетки. Не верно указано у видео.
Поясни подробнее
Если экран больше за 1200px, то контейнер под контент в бутстрап имеет ширину 1170px, но при использовании внутри контейнера колонок ( сетка бутстрап 12 колонок), то ширину из за отступов в колонках станет меньше на 30px, из за мерджинов в колонках и будет контейнер тогда 1140px, но если колонки поместить в div с классом row, то контейнер остается 1170px, так как row добавляет по -15px (30px) и контейнер снова 1170px. (Верстаю уже 2 год)
У нас видео о том как делать макет и его дизайн, а не как верстать. Твои 1170 не делятся на 12 колонок без остатка и новичкам будет сложно рассчитать сетку под эту ширину. Не путай новичков пожалуйста заявлениями «в видео неверно». Всё там верно.
Сложнооо
Привет, Максим. Очень интересует один вопрос. Казалось бы, должно быть понятно, но уже несколько дней не могу сам до конца разобраться и вот решил спросить:
Понимаю, что когда речь идет о дизайне мобильних приложений на телефоны, планшеты и тд, мы используем систему едениц измерения в логических пикселях. В XD, Figma і тп. все изначально заточено под логичиские ( условные пиксели) и это логично. Скорее всего что такое ( типо с умножением 1х или 2х ) есть и для дизайна сайтов. Но, лонг стори шорт, когда речь идет, к примеру, о бутстрапе, где ширина рабочей (контентной) области составлет ( или составляла раньше) 1140 px, то о каких пиеселях ми говорим? Физических или условных? Ведь если делать в Фотошопе, то ми навернека используем физичиские. А потом просто експортируем два макета в 1х и 2х ?
Большое спасибо!
Так в принципе достаточно и статичного дизайна сайта?
Кстать меня одна вещь напрягает в адаптивном дизайне. Когда открываешь firebug, то врубается адаптивная версия на большинстве сайтот (если файрбаг в режиме "docked" а не "float")
Очень интересно, спасибо что посоветовал Figma в предыдущих уроках. Хотелось бы обзор даной проги.
Принято :)
th-cam.com/channels/QsVmhSa4X-G3lHlUtejzLA.html
Поддерживаю, больше видео по Figma!
Спасибо! Очень полезно!
размер сеток изменился в 4 версии? тыкните где скачать пожалуйста я новичёк)
На сайте bootstrap. Смотри на оранжевые цифры: getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
У видео не верные размеры. Он учел что сетка 1140 из за отстутов, но если у row блоки то 1170
У нас видео о том как делать макет и его дизайн, а не как верстать. Твои 1170 не делятся на 12 колонок без остатка и новичкам будет сложно рассчитать сетку под эту ширину. Не путай новичков пожалуйста заявлениями «в видео неверно». Всё там верно.
что-то слишком рано начали мы отказываться от 320px
А вот кстати и да. Даже если брать яблочников, то многие ещё ходят с 4s, да и SE вполне себе продаётся.
Ну, в Москве может и мамонт, а вот в Замкадье он в магазинах продаётся))
Тоже обратил внимание на это, тк я только начинаю, скачал шаблоны сеток bootstrap 4 под Figma и там последний самый маленький макет - 320px
320 используется повсеместно. Те кто пишет, якобы отказываемся от 320, поймите одну вещь. Это не вы навязывание людям свои размеры, это используемые в ходу устройства указывают нам верстальщикам под какие экраны верстать. И мы подстраивается.
Было полезно
Хочу на курс дизайн 3.0, ищу деньги.
Всё-таки: бутстрап, а не бутстреп. Слог-то закрытый :)
я бы по поводу английского произношения вообще не заморачивалась. Читала бы, как написано. Дебильный язык. Изучаешь правила,а потом так бац! а ты не так это слово прочитал. Это слово находится в исключениях из правил. ДА? и сколько там этих слов вне правила? Да так, половина.... Занавес. Логики, каждое слово изучать отдельно нету! Жаль, что Непобедимую Армада подкачала. Сейчас бы во всем мире испанский правил. Самый легкий и понятный язык для изучения.
18 год - ЧУВАК!!! Выброси своё видео, инфа давно устарела.
Или как? На тебе Боже что мне негоже?
Нет
мой диз 87
Что ты за хернюснимаешь? какой разрешение экрана...почитай книги.
Там код по дефолту по размеру сопоставлет разрешение.
не могли-бы посоветовать сайты где можно выучить а то на ютубе ролики показывают только как меняется но не сам код и как все это делается только типы
Бла бла бла пользы 0