Скачать "Основы и эволюция адаптивной вёрстки"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F_g4NnnZdTxQ%252Fmaxresdefault.webp&w=1139&q=75)
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F-K5_eEAM6uI%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F32WQuKaDk4o%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FEOfCEhWq8sg%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FaOKIV6lX_PE%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fc6KoatRLeDA%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FjXPU0uAzmYY%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FsQ2GqDeSqYY%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FsszC4j4Wcpo%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FxIcFEhMavxQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FxJkorxog6Gg%252Fmaxresdefault.jpg&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
[музыка]00:00:07
Так ну что ж Всем добрый вечер00:00:08
пожалуйста радостные плюсы в чат Если00:00:10
хорошо всё работает Если видно если00:00:13
слышно00:00:15
так Ага вижу плюсы пошли Отлично вот Ну00:00:21
давайте начинать сейчас по00:00:30
130 Ну все знают что в записи вебинары00:00:34
будут Поэтому вот не торопятся приходить00:00:37
я просто сразу хочу вот первым делом00:00:39
даже не представившись не рассказав про00:00:41
что вебинар я сразу хочу закрыть вот00:00:44
этот вот вопрос запись вебинара будет00:00:47
будет выложена на YouTube появится там00:00:49
где-то около полуночи по Москве вот00:00:52
поэтому сразу вот такой вот Линк кидаю00:00:54
Кто хочет Подписывайтесь тогда точно Не00:00:56
пропустите Итак Ну у нас00:01:00
Я думаю очень много тех кто постоянно00:01:03
ходит на наши вебинары Но поскольку Есть00:01:05
и те кто первый раз я представлюсь зовут00:01:08
Меня Дмитрий Вот буду у вас этот вебинар00:01:12
вести Что про себя сказать Да ничего не00:01:14
буду говорить В общем на сайт Можете00:01:15
зайти и там посмотреть примеры работ00:01:18
портфолио всё что00:01:21
угодно вот больше про себя думаю не надо00:01:24
ничего рассказывать Давайте рассказывать00:01:26
про00:01:27
вебинар вопрос к вам вы зачем пришли00:01:29
вообще00:01:30
У кого какие ожидания от адаптивной00:01:33
вёрстки у кого может быть какие-то в ней00:01:34
проблемы есть вот может быть или00:01:38
наоборот даже не знаете что такое00:01:39
адаптивная вёрстка вот интересно какой00:01:41
начальный уровень аудитории сейчас так00:01:44
нужно сайт адаптировать узнать что-то00:01:46
новое учиться улучшить00:01:48
знания Да вот Напишите нолики если есть00:01:52
те кто вообще адаптив не умеет делать00:01:54
вообще если ниразу не представляет как00:01:57
это он видел интересный комен типа на00:02:00
смарт Грид посмотреть Да Смарт Грид00:02:02
будет в конце вебинара вот я сразу скажу00:02:06
в конце вебинара я покажу как делать00:02:08
адаптив вообще не напрягаясь Вот это00:02:10
будет такая Волшебная00:02:12
таблетка Но мы пойдём по порядку с самых00:02:14
основ и Постепенно будем рассматривать00:02:17
эволюцию так проблема больших таблиц00:02:20
основные косяки так вот пишет Go сразу00:02:23
без напряга Ну не без напряга не00:02:25
интересно всё-таки метод без напряга00:02:27
базируется пониманием на методами на00:02:30
методах с напряга вот пишут флексы Нет00:02:32
флексы не спасают00:02:34
А вообще про адаптивную вёрстку Давайте00:02:38
вот я расскажу как будет строиться00:02:40
сегодняшний вебинар про адаптивную00:02:41
вёрстку мы с вами Сначала посмотрим00:02:44
самые основы то есть вот те кто по00:02:45
опытнее вы первые 20 минут можете пойти00:02:48
чайку попить Вот Потом к нам00:02:49
присоединитесь А мы рассмотрим Как00:02:52
писать медио запросы Как делать зачем00:02:55
его ставить Вот как делать так чтобы с00:02:58
адаптив особых проблем было вот а дальше00:03:01
пойдём к эволюции технологии То есть вы00:03:03
увидите что в принципе адаптив делается00:03:05
логично и достаточно просто но всех00:03:08
верстаков постоянно Ну напрягает одно и00:03:11
тоже писать Вот мы посмотрим на то какие00:03:14
есть проблемы и будем по шагам00:03:15
разбираться с эволюцией вот ИП глянем00:03:17
чуть-чуть его идею подхода к адаптивки и00:03:20
флексбокс быстренько покажу там самый00:03:23
какой-то основной момент и00:03:27
потом00:03:28
вот кто плюса нете Кто на Ютюбе про СРТ00:03:32
Грид видел уже00:03:33
э так вот Владислав спрашивает научусь я00:03:36
адаптировать после вебинара ну думаю что00:03:39
да да ничего себе сколько много народа00:03:41
про Smart Грид уже слышали А зачем вам00:03:43
тогда вебинар по адаптивной вёрстке вы00:03:45
этот NP My Smart grd и не надо вам00:03:47
никакой вебинар слушать Ну ладно это я00:03:50
всё всем покажу пока Давайте э00:03:53
потихоньку начинать А сейчас я сразу00:03:57
запущу демонстрацию экрана а00:04:00
И начнём смотреть код потому что адаптив00:04:03
она конечно на презентации не00:04:06
учится вообще сегодняшний вебинар у нас00:04:09
Я надеюсь где-то часа полтора будет идти00:04:12
Вот как раз про длительность спрашивают00:04:14
на самом деле про адаптивную вёрстку Я00:04:15
бы мог без перерыва я думаю часов 600:04:17
рассказывать и материал бы не кончился00:04:19
но останется в сети два человека и вот00:04:22
которые тоже будут не спать вот00:04:24
остальные разбегутся поэтому всё-таки мы00:04:27
такое пытаемся Разумное время соблюсти00:04:31
чтобы ну чтобы вас сильно не напрягать А00:04:34
так вот сразу спрашивают как я отношусь00:04:36
к бутстрап значит пока00:04:40
технический момент Да пока я запускаю00:04:42
экран я могу на этот вопрос ответить Я к00:04:45
бутстрап отношусь двояко Я считаю что он00:04:48
не особо удобный когда делаем клиентскую00:04:52
часть бутстрап Мне очень нравится для00:04:55
админок Вот то есть в админке самое то00:04:58
хорошо оформлены селекты кнопочки есть00:05:00
ещё что-то ещё что-то под админку00:05:02
адаптировать не надо Вот там меня буп00:05:05
устраивает полностью а конечно для00:05:08
вёрстки сайтов на клиентской стороне я00:05:10
буп не использую и Не рекомендую его00:05:13
использовать вот бу Как шутят на00:05:17
вебинарах периодически на меня там уже00:05:18
это зуб сидит точит Каждый раз как не00:05:22
вебинар немножко попу проходим жёсткими00:05:25
словами Итак давайте начинать смотреть00:05:28
проект вот основа адаптивной вёрстки я00:05:30
буду показывать на каком-то таком00:05:32
макете Ну ничего особенного он из себя00:05:35
не представляет на дизайн Не смотрите00:05:36
дизайна тут нет это просто тупо куча00:05:38
разных набросанный00:05:42
[музыка]00:05:45
принципы Вот и в адаптивной вёрстке к00:05:49
бустра мы вернёмся вот где-то через00:05:51
часок или там минут через00:05:53
40 к обсуждению хорошо это или плохо А00:05:57
вот в адаптивной вст знаете оче важный00:06:01
юан Скажите бывало ли у вас такое бывало00:06:04
ли у вас такое Что вам надо адаптировать00:06:07
сайт А вы пытаетесь его адаптировать и у00:06:11
вас не получается он вас дико бесит Вот00:06:13
пните Вот У кого такое было хоть раз в00:06:16
жизни я вот сам могу плюсик в чат00:06:18
написать00:06:20
вот да и знаете Откуда вот это всё00:06:24
берётся руну00:06:28
вст00:06:30
лег делать е или тяжело е делать А это00:06:33
напрямую зависит от того как изначально00:06:35
СН макет вот если изначально сайт00:06:39
сделали как бы с фиксированной шириной и00:06:42
с размерами внутренних элементов в00:06:43
пикселях всё это можно убиться это можно00:06:46
голубом стену прошить вот прежде чем эту00:06:50
адаптив сможешь сделать поэтому те из00:06:52
вас Кто в большей степени новички00:06:57
пожалуста для вот эти нюансы как мы00:07:01
делаем вёрстку изначально Потому что00:07:05
если только вы вот знаете как новички00:07:08
любят делать Вот сначала сверстать весь00:07:10
сайт под большой монитор а потом00:07:13
когда-то когда-то его адаптировать да00:07:16
под мобильное устройство и они короче ну00:07:20
сейчас я буду пародировать Да вы увидите00:07:22
как они верстат и как потом мучаются с00:07:25
адаптив так пром пром чуть позже этос00:07:29
немножко в базовую тему Не00:07:34
входит Ну что какой здесь блок самый00:07:36
интересный для адаптива Кто как00:07:38
думает вот если глядеть на этот макет00:07:41
который сейчас на экране так телефоны Да00:07:45
товары Ну товары наверно самое00:07:47
интересное Вот но меню Да согласен меню00:07:49
тоже интересно меню00:07:52
правда меню правда там ещё и Джени был00:07:55
бы нужен но вот Наша задача сейчас самые00:07:58
самые основы понять00:08:00
если начинать с ПК так с ПК вида Не ну00:08:05
тут сейчас я покажу Просто в чём00:08:06
проблема неважно С какого вида вы00:08:08
начинаете главное Просто сразу понимать00:08:11
что вёрстку надо делать Ну так чтобы00:08:13
потом себя не мучить значит смотрите00:08:16
этот макет сейчас СВР с фиксированной00:08:19
шириной Вот видите он с фиксированной00:08:22
шириной То есть у меня появлятся00:08:24
горизонтальная полоса прокрутки Вот она00:08:26
внизу Да и получается е какая-то фня Как00:08:29
вы видите что-то зарезала там куда-то00:08:31
ушло В общем всё не так как надо и00:08:35
первый ко всем вопрос Вот скажите когда00:08:38
мы начинаем делать адаптивную вёрстку00:08:41
вот вопрос к тем кто по опытнее Кто00:08:43
знает Вот как мы задаём ширину внешнего00:08:46
элемента как мы задаём ширину обёртки00:08:48
какое там свойство какая там единица00:08:52
измерения то есть есть у нас вот обёртка00:08:54
которая делает центровку нашего сайта00:08:57
Вот и тут многие пишут проценты вот а на00:09:01
самом деле это неправильно потому что мы00:09:02
задаём это в ма И в пикселях то есть как00:09:06
бы смотрите какое дело какая задумка Вот00:09:09
у нас есть какой-то хедер да который00:09:12
даёт фон на всю ширину экрана на 100% и00:09:16
у нас дальше внутри этого хедера есть00:09:18
кла то есть вот это вот стандартная00:09:20
схема по которой верстат Ну вообще00:09:23
абсолютно все все и всегда сечас так00:09:25
верстат это ситуация когда у нас есть00:09:28
один распространяется на всю ширину00:09:30
экрана и внутри него находится ди00:09:32
который отвечает за центровку сайта и00:09:35
вот например дизайнер нарисовал этот Диф00:09:38
на 1.80 пикселей и мы ему прописали э00:09:41
маржи нуля авто и там Вис Э да вот такой00:09:46
вот а и он стал куда надо так вот первый00:09:49
шаг адаптивной вёрстки заключается в том00:09:52
сейчас я открою нужную папку А первый00:09:55
шаг адаптивной вёрстки заключается в том00:09:56
смотрите что вот такой вот репер я00:09:59
сейчас сделаю масштаб побольше вот здесь00:10:02
вот мы пишем неви а пишем макви это00:10:04
первое действие которое Обязательно надо00:10:06
сделать00:10:08
и как бы что тогда будет получаться00:10:11
будет получаться следующее то что на00:10:13
больших экранах Вот видите сайт себя00:10:14
чувствует Нормально да на огромных00:10:17
мониторах вот а потом когда мы доходим00:10:19
до критического размера То есть когда Я00:10:22
дохожу до 1280 пикселе то соответственно00:10:26
вот он начинает постепенно сжиматься00:10:29
Конечно работает криво но зато у нас не00:10:31
возникает никакой горизонтальной полосы00:10:32
прокрутки то есть мы ограничиваем сайт00:10:34
только По максимальной00:10:37
ширине вот а потом он как бы получается00:10:40
занимает фактически 100% экрана Вот это00:10:43
первый шаг Когда вы создаёте адаптивную00:10:46
вёрстку это соответственно использование00:10:48
Ma вместо ви И вообще когда мы делаем00:10:51
адаптив всегда00:10:54
использовать го лучше чем00:10:58
обыч00:10:59
блоки от постоянных ма Нет они не00:11:29
про не всегда работает но опять же надо00:11:31
на браузер смотреть макви в процентах00:11:33
это конечно можно ставить но не совсем00:11:36
понятно Зачем всё-таки как00:11:40
бы ту тут смысл-то такой что он00:11:43
ограничен Да по ширине Вот и на больших00:11:46
мониторах не разъезжается на 100% потому00:11:48
что там фиг дизайн сделаешь если на 192000:11:51
пикселей разъедутся так вот спрашивают00:11:53
что делать со звуком но смотрите вот00:11:56
работает трансляция у всех кто в новых00:11:58
браузерах да то есть мы работаем на vpc00:12:01
сейчас на технологии вот и кто в новом00:12:04
Мозиле или в новом Хроме у того всё00:12:06
хорошо00:12:08
а так Ну00:12:10
значит вот это вот такой первый шаг00:12:13
самый-самый первый шаг который мы делаем00:12:16
ставим макви вот спрашивают чем плохи00:12:19
другие единицы измерения другие единицы00:12:22
измерения можно использовать Но вот это00:12:23
вот самое простое Да самое простое что00:12:25
можно поставить А так можно ставить что00:12:27
угодно и и как бы эффект будет00:12:30
нормальный Но это самая классическая00:12:32
Самый классический подход вот плюс они00:12:35
те кто понимает зачем мы ставим макви то00:12:37
что в отличие от обычного виза у нас00:12:40
теперь будет всё сжиматься нормально Вот00:12:43
я вижу очень много вопросов идёт там00:12:45
таких посторонних связанных с адаптив00:12:47
кой да там как прилепить меню кверху Ещё00:12:50
что-то ещё чего-то вот немножко не по00:12:53
теме сейчас эти вопросы поэтому ближе к00:12:55
концу вебинара там потом их можете ещё00:12:57
раз продублировать я попробую на них00:12:58
тезис00:13:00
ответить так максви в процентах у блока00:13:03
который внутри блока в пикселях Но00:13:05
вопрос только в том Зачем так делать Мы00:13:08
вот этот вот макви используем00:13:10
исключительно для внешнего контейнера да00:13:12
для внутренних элементов сейчас будем00:13:13
делать немножко00:13:16
подругому для внутренних элементов00:13:18
подойдёт обычный виц в процентах Но вот00:13:19
это вот чуть позже Итак значит первый00:13:22
шаг к адаптивной вёрстке мы сделали00:13:24
Теперь давайте посмотрим на шаг номер00:13:26
два это даже не шаг А это анализ00:13:29
вот смотрите у нас с вами есть один00:13:31
товар вот он этот товар Да находится он00:13:35
внутри какого-то родительского блока и00:13:37
они успешно стоят по четыре элемента в00:13:39
ряд вроде всё хорошо но мы когда будем00:13:43
сжимать экран мы увидим то что вот эти00:13:44
элементы сейчас попробую сжать экран мы00:13:47
увидим что эти элементы будут отлета да00:13:49
Вот видите бам вниз отлетел Но разве это00:13:51
адаптив это же вообще фигня00:13:53
какая Вот зде возникает вопро что00:13:57
намдо Медиа запрос00:14:00
какой-то так называемый то есть00:14:02
применить отдельные стили но смотрите00:14:04
Какая засада Какая засада бывает у00:14:08
новичков и они после этого начинают00:14:10
просто плеваться и беситься на эту00:14:12
адаптивную вёрстку значит засада00:14:14
заключается в том что если макет00:14:15
изначально свёрл Фигово то адаптив у00:14:18
него не сделаешь Вот посмотрите на такую00:14:22
конструкцию в де строке вот у меня00:14:26
вопрос к вам ко всем такой вот что здесь00:14:29
для адаптивки просто кошмар вот00:14:32
Представьте вам достался от какого-то00:14:34
верстальщика такой00:14:36
макет так и вам его надо00:14:40
делать так строгие размеры Да в пикселях00:14:44
значение флоты но флоты да я согласен00:14:46
флоты Это конечно тоже печально но с00:14:49
флотами можно работать и как бы ещё 200:14:52
года назад на флотах все всё делали и00:14:54
всё было хорошо люди были рады и00:14:56
счастливы то что на таблицах не надо да00:14:59
то что можно хоть флоты писать это00:15:01
теперь все разбал пишем и никаких00:15:03
проблем типа того да вот а здесь Да00:15:06
здесь абсолютно правы те кто написали то00:15:10
что проблемы с пикселями00:15:14
да так А вот теперь с трансляцией что-то00:15:18
что-то плохое00:15:21
Да так всё пропало00:15:24
паника00:15:26
Так давайте пом00:15:30
так вот я должен был появиться должен00:15:32
был снова появиться и экран снова00:15:34
работает так ну ладно какой-то глюк был00:15:36
в трансляции ничего страшного вот00:15:39
повторю а то вдруг может быть Не успели00:15:41
это услышать вот если вам надо00:15:44
адаптировать сайт который верстак сделал00:15:46
Вот так надо ему что-нибудь нехорошее00:15:48
написать Да значит смотрите Почему будет00:15:52
возникать проб при адани00:15:57
вда00:15:59
из но разу не видели адаптив вы сес00:16:01
увидите что здесь в принципе ВС очень00:16:03
логично и00:16:05
нено вот смотрите Допустим мы понимаем00:16:08
то что у нас экран уменьшится как-то и00:16:10
мы должны этим элементам задать другие00:16:12
размеры Вот и мы тогда с вами пишем что00:16:15
мы пишем вот такую вот простую команду00:16:17
собачка Медиа Так кто знает что мы там00:16:20
дальше00:16:27
пишем скрин напишу это означает то что00:16:30
мы для устройства которое называется00:16:32
экран Да дальше пишется Вот end и дальше00:16:35
прописывается такой параметр как Max00:16:37
Vitz вот так вот00:16:39
А вот перед вами классика жанра то есть00:16:42
классика любого адаптивного Медиа00:16:45
запроса А вот после mawi здесь я должен00:16:49
написать значение э на котором я буду00:16:52
применять адаптивную вёрстку значит я00:16:55
могу сделать Что я могу Вот этот макет00:16:57
сейчас открыть в Хроме в Хроме очень00:16:59
удобно смотреть размеры элементов00:17:02
размеры точнее экрана вот значит00:17:05
Обратите внимание да то что chome00:17:08
показывает в пикселях вот я вожу влево00:17:11
вправо и он мне показывает ширину экрана00:17:13
и Вот видите где-то на 1300 у меня00:17:15
начинаются проблемы То есть вот по00:17:17
логике вещей надо где-то здесь прописать00:17:19
Медиа00:17:20
запрос Сразу говорю то что сейчас у нас00:17:22
часть немножко пародийная да то есть я00:17:24
показываю вам как ВС печально если вст00:17:28
изначально сдела криво Вот Но я пишу00:17:30
что-то Типа такого Med Ma 1300 пикселе и00:17:35
вот всем кто первый раз Пишет первый00:17:38
свой Медиа запрос Да советую тестировать00:17:41
это каким-либо00:17:42
образом Ну давайте блесни знаниями00:17:47
вёрстки не нужно указывать как правило00:17:49
нет как правило макви за00:17:52
хватает вот тех коне мо00:17:57
указать смысла в этом особого здесь нет00:18:00
Так ну что никто не хочет блеснуть00:18:02
знаниям вёрстки это вот вот так вот00:18:04
делается адаптив да00:18:08
да вот после 1.300 всё пропадает Ну вот00:18:12
пожалуйста вот новички увидели сейчас00:18:14
свой первый Медиа запрос бам-бам то есть00:18:17
Э можно это назвать даже адаптивной00:18:20
вёрст ведь на разных размерах мониторов00:18:23
сайт работает по-разному вот то есть00:18:26
взяли скрыли этот элемент00:18:29
Опа и нормально00:18:30
А да можете можете так делать00:18:33
адаптив Главное чтобы заказчик потом не00:18:36
удивился00:18:37
а то есть по сути Здесь вам нужно00:18:39
запомнить что то что мы с вами когда00:18:41
делаем адаптив вот таким вот простым00:18:43
топорный образом мы прописываем так00:18:45
называемый Медиа запрос и в рамках этого00:18:47
Медиа запроса указываем на какую ширину00:18:49
экрана мы00:18:57
ориентируемся00:18:59
вот плюсу ите Кто понял синтаксис кого00:19:01
не напугали вот эти фигурные скобки00:19:03
дополнительные Так ну предполагаю что00:19:06
сейчас наверное процентов 90 из вас это00:19:08
знают да Или видели в сети хоть раз00:19:10
такой Медиа00:19:12
запрос Вот Но мы так не очень быстро00:19:15
разгоняемся мы темы будем00:19:18
усложнять вот а нас интересует что00:19:20
значит опять-таки подчеркиваю сечас мы00:19:22
делаем00:19:23
плохо00:19:25
мым и здесь указываем что мы хотим с00:19:30
прок айтем сделать вот спрашивают лучше00:19:33
макви НВИ или на выбор на выбор конечно00:19:35
то есть здесь Всё зависит от того Откуда00:19:38
вы идёте снизу вверх или сверху вниз00:19:40
обычно верстальщики Несмотря на все вот00:19:42
эти вот лозунги и красивые слова типа m00:19:44
F там ещё какие-то вот такие00:19:49
пафосные эти крики всё равно все00:19:52
верстаки верстат сначала на Большом00:19:53
мониторе на своём а потом адаптируют вот00:19:56
делают это поблочно вот поэтому мы как00:19:59
правило идём сверху вниз используем00:20:01
mawe вот а можно конечно делать наоборот00:20:04
Да можно начинать верстать на телефоне и00:20:06
с помощью minv потом стиле как бы00:20:08
переопределять но но понимаете Почему00:20:12
делают вот так как я показываю потому00:20:14
что адаптивная вёрстка она как правило00:20:15
проще э имеется в виду вот вёрстка на00:20:18
телефоне что там верстать там всё идёт00:20:19
вертикально друг за другом вот на самом00:20:21
маленьком экране00:20:23
ээ каждый блок скорее всего занимает00:20:25
100% ширины их не надо рядом ставить вот00:20:28
а на Большом мониторе нужно вот все эти00:20:32
навороты делать Да все элементи рядом00:20:34
друг с другом и так далее00:20:37
Так значит Давайте попробуем прописать00:20:41
что-нибудь вот здесь Ну вот смотрите как00:20:43
делают новички в адаптивки в своей Они00:20:47
видят то что здесь какая-то критическая00:20:48
зона Да на 1300 и они короче берут и00:20:51
пишут ма давайте мы изменим ширину этих00:20:54
элементов то есть вот они у нас стоят00:20:56
под вряд я сейчас по четыре в ряд стоят00:20:59
А я напишу там вид 200 пикселей чтобы00:21:01
они в этот момент стали по три в ряд да00:21:03
то есть вот так вот00:21:05
О ничего себе они ещё даже как-то00:21:07
анимировано видите Ну не 200 а 25000:21:10
наверное надо Да занимаюсь сейчас00:21:13
конечно ахинея но тем не менее о00:21:16
смотрите Какая красота Давайте поставлю00:21:18
245 и мы с вами полюбуемся на суперскую00:21:21
адаптивную00:21:23
вёрстку вот смотрите значит что00:21:25
происходит вот у нас такой экран00:21:28
я подвожу размер экрана к 1 и ширина00:21:32
блока У меня теперь не 173 пикселя а 24900:21:36
Бам и адаптивная вёрстка смотрится00:21:38
хорошо и красиво Кто знает какая здесь00:21:41
Подстава теперь вот кто знает что дальше00:21:45
будет бесить если адаптив делать Вот00:21:49
так00:21:52
так каждый раз опять слет Да совершенно00:21:55
правильно есть сри вот ко но читают в00:21:59
сети Про Медиа запросы Да и дальше00:22:03
пытаются00:22:04
вот скажем так применить их на практике00:22:08
Да и применяют вот так как я сейчас00:22:09
показал то они начинают ненавидеть00:22:12
адаптивную вёрстку потому что потом00:22:14
когда они ещё чуть уменьшат экран им00:22:16
придётся снова писать Медиа запрос и00:22:18
понимаете что получается Они только что00:22:20
написали Медиа запрос для 130000:22:22
пикселем00:22:26
50 сразу понимают сколько Медиа запросов00:22:29
придётся им написать Вот и всё и впадают00:22:33
в панику и никакой вёрстки не00:22:36
получается И вот здесь важно понять00:22:39
следующее Когда вы делаете современную00:22:42
вёрстку то вы от адаптива никуда не00:22:44
денетесь и чтобы адаптив шёл нормально00:22:47
один из главных критериев адаптива - это00:22:50
задавайте ширину внутренних блоков в00:22:53
процентах то есть не ширину всего сайта00:22:55
а ширину внутренних блоков00:22:58
Вот это важно потому что смотрите нам00:23:01
надо поставить элементы по четыре в ряд00:23:03
вот как они у нас стояли и как они у нас00:23:04
стоят на большом экране вот так вот да00:23:07
они стоят значит давайте подумаем как их00:23:09
можно поставить по четыре в ряд вот В00:23:12
текущей ситуации здесь видимо был00:23:16
какой-то было страдание мазохизм00:23:19
вычисляли каким-то чудом вот эти 17300:23:22
пикселя самом де их надоть Дава00:23:26
поду00:23:29
можно коне00:23:31
25% учтите просто что между ними есть ещ00:23:33
какие-то маржи поэтому Давайте попробуем00:23:36
их00:23:38
поставить Ну вот подумать Да и дать00:23:41
какие-то значения Давайте маржи00:23:43
попробуем дать там скажем 2% между ними00:23:45
так вот напишу сечас Так 2%00:23:49
маржи я не знаю насколько там хорошо00:23:51
после00:23:56
это00:23:58
применять если маржина 2% то как мне00:24:01
ширину то теперь00:24:04
посчитать так вопрос на верстальщику00:24:10
математику Сколько марнов между00:24:13
элементами ми1 пишут так Boing Border BX00:24:20
там уже стоит Ну да все пишут разные00:24:22
какие-то значения но смотрите что здесь00:24:24
можно сказать00:24:26
Вот давайте я сделаю принтскрин и в Пете00:24:31
кое-что покажу вот здесь у вас два00:24:33
маржина Да сталкиваются друг с другом00:24:35
здесь два маржина здесь два00:24:38
маржина вот а ещё марны есть вот здесь00:24:41
вот по одному Да по одному значению с00:24:43
этими маржина поступают хитрее значит00:24:46
чтобы эти марны не отталкивались ставят00:24:48
марны для строки отрицательные Вот это00:24:51
такой достаточно хитрый00:24:53
механизм достаточно интересный Яго сечас00:24:57
вам попробую объяснить А пока мы видим00:24:59
то что у нас по сути шесть марджин00:25:01
потому что вот эти марджи нам Ну не00:25:03
нужны у нас э блоки должны не00:25:06
отталкиваться от края родительского00:25:07
элемента то есть блоки должны стоять вот00:25:09
так00:25:10
а в итоге получается то что мы с вами00:25:12
насчитали шесть марджи нав Да два - это00:25:14
не процент Это количество марджи нав00:25:16
здесь а видите Да два маржина Тут два00:25:19
маржина Тут два маржина тут То есть00:25:20
маржина всего шесть у нас и получается00:25:23
мы на мажино всего потратим00:25:25
12% вот как-то так00:25:28
плюсу Кто понял почему на маржи00:25:34
12% так на все00:25:38
Мар так вот смотрите Да я вижу некоторые00:25:43
минусы пишут Некоторые из вас значит00:25:47
Давайте ещё раз поясню вот мы пишем Ман00:25:50
2% это значит у этого00:25:53
элемента00:25:56
э00:25:59
и вот получается то что у00:26:02
них видите стрелочек Да00:26:07
нарисовано вот когда будет по два блока00:26:09
в строки Это погодите это попозже мы00:26:11
пока вот с текущим вариантом работа не00:26:17
схлопывается то есть схлопывается в00:26:20
единую конструкцию только00:26:22
Вертикаль00:26:26
горизонтальные вот я поставил значит00:26:29
ширину 2% этим марм Ну и как мне теперь00:26:33
посчитать ширину блока вот00:26:37
Предлагайте как же мне посчитать ширину00:26:40
этого00:26:43
блока так 2 на00:26:46
6 код увеличить Ну код Могу конечно но00:26:49
он уже и так00:26:50
здоровый 88 на 4 правильно 8800:26:56
надо00:26:59
видите 12% тут так и написано 100% ми00:27:03
12% получается 88 и делим это на 4 и у00:27:07
нас ширина блока получается00:27:09
22% значит сейчас эти00:27:13
блоки Так секунду клавиатура подвис00:27:16
легче кальк времени нет не надо думать00:27:19
но у калька есть проблема с поддержкой00:27:21
опе сес00:27:26
ом не поместились Да блоки не00:27:30
поместились этому Есть объяснение потому00:27:32
что у меня боковой маржин он здесь зазря00:27:34
стоит вот а про Бордер спрашивают00:27:37
скажите пожалуйста кто из вас в курсе00:27:39
вот почему и Бордер и панг Я не учитываю00:27:41
В этой системе я пока напишу волшебную00:27:44
штуку странную00:27:50
Так а вы напишите почему вот и Пади и00:27:54
борде себя хорошо чувствуют Да бокса00:27:57
потому что00:27:58
так что-то с размером элементов я00:28:00
переборщил00:28:02
как-то так сейчас бо выставлен Да да00:28:06
совершенно верно Так и есть значит00:28:09
Посмотрите смотрите вот00:28:13
сюда Есть такое волшебное свойство00:28:15
которое называется00:28:18
Bo его кстати здесь нет видите изза00:28:21
этого ВС работает плохо у меня есть00:28:24
какие-то Пади У меня есть м вот и они00:28:28
сейчас физически увеличивают размер00:28:29
моего элемента и возникает вопрос А как00:28:32
мне теперь пересчитать ширину Мне её00:28:34
надо видимо уменьшить на размер00:28:43
паддингтон и оно определяет правило00:28:46
расчёта размера элемента И если мы00:28:48
ставим здесь вот такое волшебное00:28:49
значение как Border B Его очень любят00:28:51
многие верстальщики то у нас Пан и рамки00:28:53
рассчитываются внутрь элемента видите00:28:55
насколько они стали меньше да то есть00:28:57
получается теперь панг рассчитывается00:28:59
внутрь А не вовне вот и поэтому элементы00:29:03
чувствуют себя более-менее нормально Ну00:29:05
тут есть правда ещё косяк с марно с00:29:09
горизонтальным одним неучтённый но тем00:29:11
не менее смотрите вот как как мы00:29:13
расположили эти элементы00:29:15
А вот такой00:29:17
приём бо бобо отличное свойство потому00:29:21
что вы пишете элементу ширину и не00:29:24
падинни рамки эту ширину никак не меняют00:29:26
Да вы как написали так она и есть и всё00:29:28
с ним Отлично Так плюсу пожалуйста если00:29:32
Понятно Что за чудо Box Border B00:29:36
А00:29:38
так так так так так так00:29:42
отлично Это здорово Так сейчас я00:29:46
чувствую что в одном моменте я вёрстку00:29:50
мог сделать не совсем так как надо из-за00:29:54
того что Over прописал там ком элемен00:29:58
вот Ну ничего ничего с этим сейчас мы00:30:00
разберёмся Так00:30:02
а давайте сделаем четыре блока на строке00:30:05
Ну давайте сделаем сейчас я тут00:30:07
отрицательный маржин не очень не удачно00:30:09
у меня с ним вышло Вот давайте я00:30:12
немножко под уменьш размер элемента Ну00:30:16
вот как-то так да поставлю Ну вот00:30:18
Нормально Нормально мы00:30:20
получили значит видите четыре блока00:30:23
стоят в ряд с ними всё00:30:26
хорошо Вот как-то так и вот смотрите00:30:29
какой есть здесь интересный00:30:32
момент тут я прописал какое-то волшебное00:30:34
свойство непонятное вот это вот да00:30:37
кто-нибудь из вас вообще есть те кто00:30:40
впервые в жизни видит отрицательные00:30:44
маржи так вот Максим спрашивает Да да00:30:47
только виц только виц надо указывать Да00:30:50
вот плюсую ясно Вот кто-то пишет часто00:30:54
пользуются кто-то Пишет первый раз00:30:56
увидел значит смотрите что это за чудо00:30:59
это один из00:31:00
тоже как бы гениальных приёмов00:31:03
адаптивной вёрстки вот очень классно что00:31:05
этот приём работает и очень классно что00:31:08
он существует00:31:09
А вот смотрите Почему этот приём просто00:31:12
классный потому что мы написали элементу00:31:16
маржина Да вот мы прописали ему маржина00:31:19
с двух сторон И с левой стороны и с00:31:21
правой стороны но мне надо чтобы вот00:31:24
этот элемент шёл своим краем по00:31:26
родительскому элементу да то есть мне00:31:28
надо чтобы вот здесь вот отступов у них00:31:29
не было а отступы были бы если бы я не00:31:32
прописал родителю вот этот вот хитрый00:31:34
машин вот смотрите Видите вот тут вот00:31:36
отступы есть да от границы00:31:38
родителя так вот первая мысль которая00:31:41
приходит в голову новичкам при такой00:31:44
ситуации это например с помощью Child00:31:48
обращаться к блокам и отменять марны То00:31:52
есть например смотрите вот эти блоки00:31:53
которые идут в первой колонке им можно00:31:55
обратиться через отменить Marin Left вот00:31:58
этим блоком можно обратиться через Child00:32:00
и отменить margin Right То есть00:32:03
получается это у нас будет Child там00:32:06
например00:32:07
4n А это будет там 4n + 3 Допустим можно00:32:11
так сделать но подставок какая Вот опять00:32:13
новички загоняют себя в адаптивной00:32:15
вёрстке смотрите как новички себя00:32:17
загоняют А когда вы это сделаете всё00:32:20
будет круто но когда у вас будет00:32:22
происходить адаптив и у вас останется00:32:24
три блока в ряд то смотрите какую жесть00:32:27
вам придётся творить Вам нужно будет в00:32:29
каждом таком перестроении заново00:32:32
переписывать эти маржин Потому что00:32:34
теперь обнулить маржин нужно вот у этого00:32:36
а этому то маржин нужно вернуть00:32:38
и пока вот это будешь делать выписк но и00:32:43
очень сильно Вот потому что ну как бы в00:32:46
адаптивки сначала Каждый четвёртый00:32:48
элемент к правому краю подходит а00:32:50
соответственно Потом каждый третий Потом00:32:52
каждый второй каждый первый и там уже00:32:55
зубами можно начать стучать если вот00:32:58
переде00:32:59
ре вот плюте если понятно что это00:33:04
некруто вот там спрашивают спасает00:33:07
всегда00:33:10
спасает спасает даже спасает вообще тако00:33:14
наверно впервые массово применил с00:33:17
отрицательными марна и тут возникает00:33:19
очень хитрый00:33:25
приём Родите блоку00:33:29
красному прописывают отрицательный00:33:31
маржин притом Он отрицательный на такую00:33:34
же величину какой маржин положительный у00:33:37
элемента который идёт вот в потоке смысл00:33:40
получается следующий вот у нас есть00:33:42
Красная рамка это наш родительский00:33:44
элемент так вот если мы ставим маржин мы00:33:47
с вами00:33:48
отталкивает А если мы ставим маржин00:33:50
отрицательный мы как будто бы в эту зону00:33:53
пускаем другие элементы и поэтому здесь00:33:56
получается вот вот такой приём мы00:33:58
родительскому элементу00:34:00
прописываем маржин слева и справа минус00:34:04
те же самые полтора про и получается то00:34:06
что вот эта вот зона она визуально никак00:34:09
невидима но маржин дочернего элемента00:34:12
вываливается в неё вот так00:34:14
вот то есть родительский элемент00:34:17
запускает Мар запускает сюда дочерний00:34:22
элемент Так ну что как00:34:25
настроение00:34:28
так небольшой Эпик фейл случился00:34:31
с трансляцией Ну ничего Давайте вот у00:34:34
вас даже больше стало обычно на 5 минут00:34:37
вебинар рвётся все разбегаются А тут вас00:34:39
ещё плюс 10 человек набежало Здорово00:34:43
Давайте да все плюсу вот да мы сейчас00:34:46
вернёмся к этим темам00:34:51
Конечно вот00:34:55
экран00:34:58
дождались00:35:00
неожиданно так давно не было таких сбоев00:35:04
что прямо вот на долго00:35:07
ничего интернет просто Опа и00:35:10
нету Ну ладно давайте возвращаться к00:35:12
нашим маржи вот смотрите я рассказывал00:35:15
про что Про то что нам надо сделать так00:35:21
чтобы ну вот не было необходимости00:35:23
отменять эти постоянно марны слева00:35:25
справа слева справа это просто кошмар00:35:27
будет Да если пытаться их отменять00:35:30
придётся вот постоянно прописывать все00:35:32
эти чады Медиа запросы и прочее прочее00:35:36
вот это неудобно поэтому смотрите что мы00:35:38
делаем вот то что здесь показано00:35:40
фиолетовым это отрицательный марн для00:35:43
красного блока то есть для родительского00:35:45
элемента Вот его можно делать либо в00:35:48
процентах либо в пикселях проценты00:35:50
работают с небольшими багами незаметными00:35:52
пиксели работают вообще чётко вот00:35:54
пиксель в пиксель всё там работает вот00:35:56
смысл заключается вот в чём какой бы00:35:59
блок у нас ни был Обратите внимание что00:36:01
он будет делать Вот любой блок вот00:36:03
допустим сейчас здесь этот блок стоит у00:36:05
него прописан margin Left и он вроде00:36:08
должен был бы оттолкнуться от00:36:10
родительского и уйти чуть правее Но вот00:36:14
этот вот отрицательный маржин у00:36:15
родительского элемента даёт ему сюда00:36:17
провалиться Да и поэтому он стоит ровно00:36:20
там где нам нужно тоже самое делает вот00:36:22
этот элемент только по правой стороне и00:36:24
самое классное заключается вот в чём00:36:26
какой бы элемент не подходил к границе00:36:28
родительского блока Да вот когда00:36:31
четвёртый элемент соскочить вниз то00:36:32
третий элемент будет касаться правой00:36:34
стороны и всё будет работать идеально00:36:36
потому что он своим правым марм тоже00:36:38
провалится вот в эту00:36:41
пустоту отрицатель маржин родительского00:36:43
блока нужно запоминать или вариант легче00:36:45
ну его запоминать если имеете в виду00:36:47
саму цифру не нужно потому что эта цифра00:36:49
совпадает с той цифры которая является00:36:51
положительным маном самих блоков00:36:55
вотт он влиять на боковую панель вот00:36:58
такой вот родительский марджин Ну по00:37:00
идее Нет по идее он не будет влиять и00:37:03
боковая панель просто тогда на всякий00:37:05
случай должна иметь Ман свой чтобы там00:37:08
была точно гарантирована пустая зона00:37:10
чтобы вот этот маржин не наскочил сюда00:37:13
вот тогда всё будет хорошо и чётко00:37:15
работать вот такая вот странная задумка00:37:18
кто что думает по поводу отрицательных00:37:20
марнов у родительского элемента Вот00:37:23
плюсу кто кому понравилась Такая идея00:37:28
так сейчас вы увидите как бы как она00:37:31
будет выглядеть на практике эта00:37:35
идейка так не совсем понятно наруже идёт00:37:39
отрицатель Ну сейчас увидите сейчас00:37:40
увидите Потерпите здесь мы с вами в00:37:44
отладчике Хрома сейчас всё увидим очень00:37:46
даже00:37:47
хорошо Вот давайте я в Хроме нажму F500:37:51
вот заново открою этот сат при этом без00:37:55
применения адаптива вот такой вот момент00:37:57
смотрите что здесь будет00:37:59
Вот Гляньте на div products Да какой он00:38:02
вот он products Fix там всё такое так00:38:05
вот видите как идёт00:38:08
ам вот он как идёт и получается то что00:38:13
вот этот вот маржин который вы сейчас00:38:14
видите слева он находится не на уровне00:38:17
надписи телефона вот если мы будем00:38:19
сравнивать да давайте Вот на этот наведу00:38:21
видите сам блок идёт там же где надпись00:38:23
телефона Где буква Т если вертикальную00:38:25
линию вот так вни провести а00:38:29
соответственно видите маржин00:38:31
проваливается левее А вот если бы у00:38:33
родительского элемента не было бы00:38:34
отрицательного маржина вот этого то00:38:36
видите этот маржин давал бы00:38:38
физический отступ у дочерних элементов00:38:42
вот поэтому здесь мы как бы даём им00:38:43
проваливаться за родителя вот таким вот00:38:46
хитрым образом Зачем нужен кфис но это00:38:49
Это другие темы Это не совсем адаптив00:38:51
это просто чтобы флоты расширяли высоту00:38:53
родительского00:38:54
элемента вот а в чём В чём суть здесь00:38:58
может быть многие подумали типа это00:39:00
приёмы вёрстки А где здесь адаптив00:39:02
адаптив здесь вот где если вёрстка00:39:04
сделана правильно то адаптив она очень00:39:07
проста А вот здесь когда мы доходим до00:39:10
вица нам с вами нужно просто вот это00:39:12
наше число там сколько было 88 или ещё00:39:14
сколько-то нам надо его короче поделить00:39:16
не на четыре а на три и мы сейчас можем00:39:19
с вами даже не пытаясь заняться00:39:21
математикой вот просто написать00:39:23
какое-нибудь значение на угад типа там00:39:25
29% Вот давайте посмотрим что после00:39:27
этого будет00:39:29
происходить вот смотрите у нас эти00:39:32
элементы Опа и чувствует себя очень даже00:39:35
хорошо Ну я могу поставить там не 29 А00:39:38
побольше Да 29 я на угад написал более00:39:41
того Обратите внимание Вот на какой00:39:42
момент если адаптив сделана Правильно мы00:39:45
можем Вот это сначала даже не писать то00:39:48
есть если я сделал адаптив в процентах00:39:50
то в отличие от предыдущего варианта00:39:53
когда я подойду к границе этих блоков00:39:55
смотрите как как они себя ведут видите00:39:58
они просто пропорционально уменьшаются и00:40:01
отступы между ними уменьшаются и сами00:40:03
блоки уменьшаются исключительно за счёт00:40:05
того что они выполнены в процентах и не00:40:06
в пикселях Вот и они не слетают да то00:40:09
есть они просто00:40:10
уменьшаются И когда вы захотите Да это00:40:13
можно теперь не на э 1300 пикселях00:40:16
делать это можно делать в какой-нибудь00:40:18
другой момент времени например там на00:40:19
1.200 вот в этот момент вы берёте и00:40:22
меняете размер этого элемента Вот00:40:24
давайте э00:40:26
так и00:40:27
сделаем вот они никогда не слетают они00:40:31
слетают если заданы только в пикселях00:40:33
блоки А мы задали в процентах у нас00:40:34
ничего не слетит Видите вот они00:40:36
уменьшаются потом бац и мы сделали им00:40:37
ширину 30% Опа снова адаптив идёт сама00:40:41
да то есть за счёт того что ширины00:40:43
элементов у нас в00:40:44
процентах нам не надо писать кучу Медиа00:40:47
запросов вот мы один Медиа запрос00:40:48
написали и сайт себя великолепно00:40:50
чувствуют в течение долгого времени вот00:40:53
плюсу ите Кто понял эту идею00:40:57
так и вот тут неожиданно возникает Такая00:41:00
подстава то что вот если сайт изначально00:41:03
СВР нормально то адаптив делается вообще00:41:05
Элементарно и даже самые-самые новички00:41:07
смогут это делать Вот а как бы если00:41:10
вёрстка изначально сделана криво то00:41:13
адаптив выбесит из самых опытных и00:41:15
терпеливых00:41:17
людей так в наба можно применять можно00:41:20
применять где угодно но в Наре если00:41:23
имеется в виду меню то там вс-таки00:41:26
обычно пункт Меню ему размеры не задают00:41:29
потому00:41:30
что вс-таки там не блоки там слова то00:41:33
есть там слово само определяет свой00:41:35
размер Вот Давайте ещё потренируемся с00:41:37
адаптивной00:41:39
вёрст что здесь можно попробовать00:41:41
сделать Давайте попробуем вот этот блок00:41:44
взять и убрать например да то есть00:41:47
замечали наверно что в адаптивки бывает00:41:50
левая колонка уходит наверх а это00:41:52
занимает всю центральную00:41:54
зону как мым Давайте подумаем00:41:57
отрицательный маржин это не Костыль Нет00:41:59
это спасение это не00:42:03
Костыль так убрать вниз предлагают Ну00:42:06
тут нас уже не спрашивают вниз или вверх00:42:09
здесь же на флотах сделано Ну вот если00:42:11
было на флексах мы могли решить куда00:42:13
убрать вниз или Вверх а здесь у нас флот00:42:15
Left поэтому он только вверх может00:42:16
убраться вот ну и мы делаем с вами что00:42:19
вот мы прописываем ещ какой-нибудь Медиа00:42:21
запрос Я бы на уга буду писать знание00:42:24
допустим возм00:42:27
ме планшетный рин Вот и просто-напросто00:42:31
спа какой-нибудь блок Ну вот надо только00:42:35
этот блок найти вот по-моему контент Сай00:42:37
Да вот он Котен Сай так 9200 написал Да00:42:41
здорово я тоже себе такой монитор хочу00:42:44
кто себе такой монитор00:42:46
хочет да Значит ему Мы например смотрите00:42:49
Что00:42:55
делаем и по00:42:57
сути Когда мы это сделаем у нас видите00:43:01
товары соскочил вниз и заметьте снова00:43:03
великолепно себя чувствует внизу то есть00:43:05
Вот она сила вёрстки правильной вёрстки00:43:08
в процентах э Если бы у нас Эти товары00:43:11
были в пикселях прописаны то мы опять бы00:43:14
пространство стало шире для них и мы00:43:16
опять бы мучились опять бы меняли им00:43:18
размеры А тут они себя ведут просто00:43:20
идеально В какой контейнер их не вставь00:43:22
они стоят так как им сказано хоть этот00:43:24
контейнер в00:43:26
100 пикселей хоть 200 хоть 300 хоть 100000:43:30
сила в процентах Да у внутренних00:43:32
элементов Вся сила в процентах именно00:43:33
Она00:43:34
позволяет нормально себя ощущать00:43:38
Вот но как бы этот блок там можно00:43:41
адаптировать дальше как угодно вот ну а00:43:44
мы можем доделать адаптив товаров и я00:43:47
здесь подчеркиваю что весь прикол в том00:43:50
что когда у Васт00:43:53
сделат и00:43:55
споко00:43:56
вот наме скажем на пикселях я им00:44:00
поставлю ширину00:44:03
48% Вот и вы увидите что сейчас это всё00:44:06
чудо будет работать переборщил Да00:44:09
погорячился на самом деле это надо00:44:11
просто считать аккуратно умножать Да00:44:13
Вычитать там из 100% маржина умножать но00:44:16
я сейчас немножко другое показываю00:44:18
Поэтому00:44:25
вот на 480 поставим ширину00:44:29
100%00:44:30
вот так одну секунду и всё будет у нас с00:44:34
вами00:44:35
хорошо вот пожалуйста Ну 100% я опять00:44:38
погорячился да Опять он заехал куда-то00:44:42
вот 98 сейчас00:44:44
пропишу вот ну и собственно говоря даже00:44:48
не важно что я здесь прописываю самое00:44:49
главное что Обратите внимание он стоит00:44:51
просто великолепно и замечательно да00:44:54
Главное понять смысл00:44:56
Вот это такой стандартный Прим Как вы00:44:58
можете делать адаптив и как в адаптив00:45:01
быть счастливыми да то есть как делать00:45:03
адаптив так чтобы она вас не бесила Вот00:45:06
такая задумка Ну что плюсу Кто понял эту00:45:08
систему с отрицательными маржина и00:45:10
ширина Почему не 100% потому что у меня00:45:13
не очень удачно Сделано в вёрстке00:45:15
изначально Это не совсем классная00:45:17
вёрстка00:45:18
получилась точнее скажем так Это00:45:21
изначально бы представте вот нам00:45:23
изначально дали кривеньку вст У меня00:45:26
просто у пера стоит и когда этот блок00:45:30
идт на всю ширину экрана то он как бы00:45:33
отрицательный Ман вырезает Вот потому00:45:35
что отрицательный00:45:38
Ман строки нашего prod Он короче не00:45:42
может пробиться наружу изза того что00:45:44
упе точнее туда пробивается но отрезает00:45:47
вот не очень хорошее свойство там00:45:54
возник надо стоять да мы ему написали00:45:57
вид 100% вот он там и стоит вот всё00:46:00
нормально00:46:01
а так00:46:04
значит что ещё хорошего Давайте почитаю00:46:07
вопрос HTML код просит увидеть Ну HTML00:46:09
код я даже и не показывал можете00:46:11
посмотреть вот он этот HTML код ребята00:46:16
кстати Кто знает В чём главная Подстава00:46:17
то Вот скажите если я сейчас на телефоне00:46:20
это открою что у меня будет с00:46:23
адаптив00:46:24
так00:46:28
так так поедет налезет в медиа00:46:33
приближать00:46:34
надо Абсолютно верно Вот разгадали00:46:37
хорошее слово не прописан смотрите в00:46:41
сети очень часто жалуется чтото нифига00:46:42
не понятно Зачем так нуже вот я вам00:46:45
сейчас постараюсь наглядно это показать00:46:47
смотрите у нас с вами00:46:54
ла двигать экран смотреть Нашу00:46:57
адаптивную вёрстку заметьте остальные00:46:58
блоки у меня не адаптированы это я так00:47:00
просто Да только товар адаптировал Вот и00:47:03
вроде всё хорошо работает но я сейчас00:47:05
запущу00:47:06
эмуляции и посмотрите человек заходит с00:47:09
Айфона 5 или человек заходит с Айфона 600:47:13
и вот как он видит00:47:15
сайт Ну хорошо у нас ничего не поехало00:47:18
но верстальщик получит потом по голове00:47:21
за это от дизайнера от заказчика потому00:47:24
что iPhone он тупит и он не соображает00:47:29
э то что этот сайт нужно адаптировать А00:47:33
что пытается сделать iPhone Вот кто как00:47:35
сейчас понимает процесс Вот почему00:47:36
iPhone не применяет наши стили Вот чего00:47:39
iPhone пытается00:47:41
сделать00:47:43
так эмулятор даёт погрешность или норм00:47:46
работает а эмулятор Гугла даёт00:47:49
погрешность на продукцию Apple но на00:47:51
продукцию Android эмулятор Гугла00:47:53
работает идеально вот00:47:57
масштаб взорвался один к одному откроет00:48:00
Но значит да смотрите что он сделал он00:48:03
взял и короче просто-напросто он вот00:48:07
пишут масштабируется по ширине экрана00:48:08
как раз-таки он не00:48:11
отмашка наши Медиа запросы не работают00:48:14
потому что iPhone увидел этот сайт00:48:16
iPhone знает то что у него размер экрана00:48:18
Допустим или Galaxy вот S6 там 36000:48:20
пикселей по ширине00:48:23
но он не говорит сесо стилем что сейчас00:48:27
реально такой размер экрана он думает00:48:29
Так я и весь сайт могу впихнуть будет00:48:31
просто не в том масштабе вот00:48:40
впихнуть сюда совершенно спокойно Вот00:48:43
так вот вмещает то есть он не даёт CSS00:48:46
команду на то что нужно применить эти00:48:48
Медиа запросы потому что CSS не знает00:48:50
какой сейчас физический размер экрана00:48:53
Вот именно для этого служит к viport00:48:57
Именно для этого служит вот такой вот00:48:59
сейчас я его00:49:00
скопирую этот г вставляется00:49:04
в шапку в вот куда-нибудь сюда00:49:08
вставляется и смотрите что он заявляет00:49:10
как бы вы Перевели вот это вот значение00:49:13
присвоить девайс Ну вот просто чисто00:49:15
интуитивно00:49:16
Расшифруйте вот эту00:49:18
строку00:49:24
так идём Кто как интуитивно00:49:54
расшифруешь Как начинает сайт работать00:49:57
то есть если вы не пропишите VIP новички00:49:59
это любят забывать делать они в браузере00:50:01
у себя гоняют влево вправо влево вправо00:50:04
ширину экрана а потом на мобильнике00:50:06
что-то он Не адаптируется никак А вот на00:50:08
самом деле за это отвечает VIP то есть00:50:10
именно ВПО говорит то что на мобильнике00:50:12
нужно установить ширину экрана равную00:50:14
физической ширине вот такой вот тег без00:50:17
которого Ничего работать не будет Вот00:50:19
плюйте кто понял смысл этого тега г00:50:22
очень нужный00:50:24
хороший одна из остов в создания00:50:27
адаптивки00:50:28
А так про что-то интересное нам так нас00:50:31
спрашивали А не не спрашивали писали вот00:50:34
значит синтаксис здесь кому интересно00:50:35
потом погуглить Там есть разные00:50:37
интересные вещи можно прописывать А00:50:40
много всего интересного здесь можно00:50:41
писать управление масштабированием можно00:50:45
изначально Scale задавать параметр00:50:47
другой вот здесь есть где разгуляться Но00:50:50
вообще классика жанра Вот такая то есть00:50:52
если адаптив сделана правильно и00:50:55
аккуратно то ничего другого здесь00:50:57
прописывать не надо немножко бесят сайты00:50:59
которые прописывают00:51:01
э Мак Scale и minale равным единице это00:51:05
знаете что делает внутри вьюпорта вот00:51:07
Роман как раз нам такое написал этого00:51:09
человека убирает возможность пальчиками00:51:11
работать ну в смысле масштабировать00:51:14
больше масштаб меньше масштаб Вот то00:51:16
есть человек хочет сайт приблизить а00:51:18
пальцы не работают да и он думает у него00:51:21
то ли iPhone заключил и сломался то ли00:51:23
ещё что-то такое произошло вот поэтому00:51:26
как бы а смысл так делать не знаю видимо00:51:29
боятся что при работе пальцами слетит00:51:31
адаптив где-то вот а так бывает00:51:34
действительно неудобно ты хочешь00:51:35
посмотреть э как00:51:37
бы что-то и вот вот Валерий как раз00:51:40
пишет максимум скел О вот вот это вот00:51:42
как раз то самое то что нельзя будет00:51:44
увеличить00:51:46
масштаб да ведь реально может быть00:51:48
мелкий шрифт на сайт какого-нибудь банка00:51:51
зашли там как обычно под звёздочкой с00:51:53
шестым размером шрифта написано то что00:51:55
вы когда берёте кредит ещё там 1000:51:59
условий соблюдаете Вот и хочется00:52:01
приблизить и нельзя Во вот для этого и00:52:04
делаю точно так Ну погодите другие00:52:07
единицы измерения сейчас не так00:52:08
актуальны для нас вот всё-таки мы по00:52:10
классике00:52:12
идём Так ну вот вот как-то так это самые00:52:16
основы создани00:52:19
адаптивки то есть тупо пишете ВПО и00:52:21
потом с помощью Медиа запросов меняете00:52:24
стили своего Сата Ну в частности вот00:52:27
Давайте попробуем глянуть на эту вёрстку00:52:29
и подумаем что тут ещё можно было бы00:52:31
сделать вот Давайте попробуем её как-то00:52:33
адаптировать эту вёрстку какой блок00:52:36
самый интересный шапка наверное да вот00:52:38
нас про шапку спрашивают но шапка здесь00:52:40
криво сделана шапка здесь сделана с00:52:42
помощью rel и АСО да то есть шапку здесь00:52:45
надо делать00:52:48
как-то по-другому но вот Давайте00:52:50
попробуем поиз учать эту вёрстку и с ней00:52:53
что-то сотворить то есть работаем сейчас00:52:56
в таком режиме как будто мы на эту00:52:58
вёрстку с вами смотрим в первый раз Ну а00:53:01
вы так на неё в первый раз и смотрите на00:53:03
самом деле Вот смотрите Здесь есть такой00:53:05
ди в рэпер Да есть ди лого какой-то00:53:08
странный ди очень странный00:53:12
Вот это видимо сама картинка да вот это00:53:16
лого есть слоган00:53:18
какой-то пока просто смотрите на00:53:20
выделение элементов Да и есть Так вот00:53:23
короче эти все00:53:26
абсолютно слоган и ну и получается изза00:53:29
этого конечно достаточно суровая00:53:33
шесть Вот00:53:36
и надо С этим что-то сделать Давайте00:53:40
какой-нибудь Медиа запрос пропишу здесь00:53:42
например Это просто показываю вам сами00:53:45
Медиа запросы Да здесь ничего нового вы00:53:49
не увидите по бото сч м просто на00:53:52
примере слона00:53:54
ионава что-нибудь00:53:58
Так давайте мы чтобы код был побольше00:54:00
Вот так вот00:54:02
сделаем так пока я копирую код00:54:05
спрашивают что такое Scale Scale -00:54:09
это стартовый масштаб который00:54:11
отобразится у человека в браузере00:54:14
Давайте раз про это спросили я вот на00:54:15
секунду отвлеку и Открою вам вот такой00:54:19
вот сайт это сейчас не реклама не00:54:21
переживайте реклама будет потом вот а00:54:24
это курсы по вёрстке Некоторые из вас00:54:27
Кто сейчас в сети даже Их проходили я00:54:29
точно знаю Вот и смотрите что здесь есть00:54:32
здесь у этого лендинга написано Вот00:54:34
видите Scale 06 это означает то что00:54:38
когда мы с вами будем просматривать этот00:54:42
сайт на Вот например Samsung Galaxy00:54:45
S5 то физическая ширина будет не 36000:54:48
пикселей Кто как думает Какая сейчас00:54:50
физическая ширина которая применяется в00:54:52
CS Вот у него прописаны Scale 06 я могу00:54:55
прописать Scale например единичка о00:54:58
видите как сайт изменился А вот и Scale00:55:02
06 Опа00:55:05
60% Ой не 60% 360 не умножить на 0,6 а00:55:11
разделить на 0,6 вот тут идут00:55:14
математические приколы ведь 360 у 0,6 -00:55:18
это размер экрана стал бы меньше да а00:55:21
здесь получается так что если физический00:55:23
размер экрана 360 пикселей а inal Scale00:55:25
проставлен в 0,6 это как будто бы00:55:28
человек сам пальчиками сайт уменьшил А00:55:30
вот но сделано это автоматически и мы с00:55:33
вами получаем то что всес будут00:55:36
применяться00:55:37
э такие вот значения как00:55:40
360 разделённый на 0,6 смотрите что мы00:55:44
получим 600 О нормально00:55:47
Вот не плохо масштаб 60% который00:55:51
приводит 360 пикселей к 600 А знаете00:55:54
Зачем так сделано что не слетала потому00:55:57
что лендинг как-то вовремя не сделали00:56:00
нормально и00:56:02
короче вот если 100% там знаете не не00:56:05
лендинг слетает А здесь есть дурацкая00:56:07
вещь вот э вот таймер таймер с сайта00:56:10
ресурса как бы Мега таймер и вот у него00:56:14
есть проблемы в адаптивки и вот чтобы он00:56:17
вмещал пришлось вот так вот прописать00:56:19
Сама вёрстка там ровно работает вот саму00:56:22
вёрстку там и стаж00:56:25
поправ вот Кан это делал может Кан в00:56:28
сети сейчас не знаю даже пришёл00:56:30
потусоваться но вот работает всё00:56:32
нормально но вот такой полезный00:56:35
элемент Мега таймером советуют не00:56:37
пользоваться конечно не надо им00:56:39
пользоваться потому что там есть свои00:56:41
приколы с переписывания времени Да пишет00:56:44
тут Давайте плюсу Кто00:56:48
понял00:56:50
так вещь хорошая00:56:53
интересная давайте пока это00:56:56
закроем вот такие нюансы адаптивной00:56:58
вёрстки у нас открываются нюансы00:57:00
достаточно00:57:02
забавные вот Ну значит давайте я Раз уж00:57:06
начал писать я пропишу что-нибудь для00:57:08
этих вот элементов там для слогана для00:57:11
телефона на самом деле это не особо00:57:13
Интересный момент адаптивной вёрстке00:57:15
кстати из-за технического сбоя Да00:57:18
который у нас был мы с вами за считываем00:57:21
то время которое было во время сбоя как00:57:23
прошедший перерыв продолжаем работать00:57:26
так а он применяется только смартфоном00:57:28
Да совершенно верно то есть вот viewport00:57:31
inel Scale при работе в обычном браузере00:57:35
компьютера Не сработает То есть это00:57:37
только в эмуляторе и только на самом00:57:40
телефоне к сожалению на компьютере00:57:43
такого нет вот Ну давайте мы первое что00:57:45
сделаем Просто position Static напишем00:57:47
этим00:57:49
элементам00:57:51
так абсолютное позиционирование - это00:57:53
жесть для адаптивной вёрстки00:57:55
это постоянно всё переписывать надо Ну00:57:57
вот смотрите нормально тогда работает00:58:00
Почему к сожалению знаете почему Потому00:58:03
что есть в дизайне такая фигня которая00:58:05
называется дизайнеру в компании00:58:07
поставили большой монитор и он начал00:58:10
рисовать всё под Этот монитор и в итоге00:58:12
потом получаются00:58:14
лендинги знаете какие лендинги потом00:58:16
получаются вот я уж не знаю может00:58:19
уменьшили нет вот здесь00:58:22
Нормально есть динги короче вот это вот00:58:25
тоже корен уже уменьшал дизайнер на00:58:27
Большом мониторе работал и сделал вот00:58:29
этот зелёный блок который был знаете вот00:58:33
если чтобы не собрать раза в два больше00:58:35
по высоте был вот этот зелёный Круг То00:58:38
есть он только на его вот тонном00:58:39
мониторе У меня даже руками не00:58:41
получается00:58:42
показать смотрелся нормально а на00:58:45
ноутбуке когда человек заходил он вот00:58:47
видел половину этого Круга небольшую Вот00:58:49
и нам тогда очень хотелось просто00:58:51
написать00:58:52
конечно Вот но пришлось на пряч00:58:56
и нормально лендинг00:59:00
отдел вот да Так что иногда хочется00:59:03
хочется и на компах такое применить Ну00:59:07
вот как вы видите в шапке всё скучно00:59:09
осталось телефону только какой-нибудь00:59:10
панг прописать или Ман топ там скажем Да00:59:14
Ман топ например 10 пикселей и самому00:59:16
херу00:59:17
проставить Давайте что-нибудь такое пром00:59:23
кН на самом деле адаптив строится легко00:59:26
когда она у вас простая Да А Вот видите00:59:30
картинка не пошла никуда потому что это00:59:31
блочный элемент то есть соответственно00:59:33
нужно сделать ещё что-то типа такого вот00:59:36
сейчас я здесь не особо подробно00:59:37
объясняю потому что это всё-таки уже00:59:39
сами основы вёрстки а не темы про00:59:42
адаптивки Ну например там маржин но авто00:59:44
пропишу Вот либо маржин 10 пикселей авто00:59:48
вот пожалуйста Ну что нормальная во00:59:50
адаптивная вёрстка в шапке плюсу ите Кто00:59:51
согласен Ну вот вот вот вот00:59:55
работает вроде00:59:57
система Кого Кого дизайнеров надо00:59:59
заставлять с Mile работать понимаете01:00:02
дизайнер с mobile наверное да но опять01:00:05
же M в M вообще всё просто что дизайнеру01:00:10
M делать Вот у него все элементы идут01:00:12
друг за другом 100% по ширине01:00:16
Да вот поэтому01:00:19
дизайне01:00:21
с01:00:23
ВХ хейт указывать Это вообще жесть для01:00:26
адаптивной вёрстки а только для01:00:28
элементов в которых мы уверены можно01:00:29
хейт указывать типа логотипа вот этого А01:00:32
так заметьте вот знаете на чём а на чём01:00:35
новички очень часто попадаются вот01:00:37
новички очень любят например для э тега01:00:41
а header они когда начинают сайт01:00:45
разрабатывать А у них в теге header нету01:00:48
как бы внутри пока никакого контента и01:00:50
они напрягаются то что этот блок э ну по01:00:53
высоте как вот такая маленькая полосочка01:00:55
идёт и они знаете вот так вот пишут01:00:57
короче берут и пишут 500 пикселей вот01:01:01
так вот а в реальности не 500 а 20001:01:03
например вот а в реальности получается01:01:06
вообще там01:01:07
140 Да вот так вот ставят думают Да как01:01:10
правильно в чате пишут думают потом01:01:12
исправлю потом всё хорошо будет Вот и01:01:15
значит что потом случается когда01:01:18
верстальщик начинает делать адаптив он01:01:21
думает А что это у всех всё работает01:01:22
нормально на меня как всегда01:01:26
Да вот01:01:28
пожалуйста одна из записей которая01:01:30
убивает вам адаптивную вёрстку нач и всё01:01:32
желание её делать это фиксированные01:01:35
высоты Если уж вам приспичило высоту01:01:37
написать Вот по какой-то причине Скажите01:01:39
как вы её пишите вот волшебные три буквы01:01:42
Напишите в01:01:44
чат конечно мин правильно Если уж вам по01:01:48
какой-то приче01:01:53
зате изначально есть а потом Опа и всё01:01:57
хорошо Нет ну авто писать это в медиа01:02:00
запросе надо Да в медиа запросе но лучше01:02:02
это вообще не делать то есть если вы01:02:04
правильно верста ете то скорее всего вы01:02:06
высоту не01:02:07
прописывается вот скорее всего высота01:02:09
высчитывается динамически от дочерних01:02:11
элементов вот такое правило Так ну что01:02:15
нам с вами ещё адаптировать давайте у01:02:17
нас время есть мы по бутстрап потом01:02:19
пройдёмся Да это наша любимая Тема а01:02:22
меню Да интересно как адаптируют01:02:26
как меню то адаптировать в кнопку01:02:27
превращать Да говорите вот смотрите по01:02:30
поводу кнопки здесь в менюшки как01:02:33
раз-таки есть вот этот самый меню tle01:02:37
смотрите какой ди интересный есть да01:02:39
меню01:02:40
tagle для чего это сделано это сделано01:02:43
для того чтобы отобразить кнопку да и01:02:45
обработать на неё потом нажатие и вот01:02:47
смотрите как это будет делаться У нас01:02:52
есть да правильно пункты меню есть вот01:02:55
эти в мобильной версии Мы хотим чтобы01:02:58
эти пункты меню01:03:00
шли без обтекании вот поэтому мы идём и01:03:05
на каком-нибудь Медиа запросе Ну вот01:03:07
Давайте Вот здесь мы в мобильник Да01:03:09
Превращаем сайт вот здесь вот здесь и01:03:11
меню будем тоже01:03:12
адаптировать вот значит что я с юшкой01:03:15
буду01:03:17
делать Так что я буду делать с этой01:03:19
юшкой Давайте01:03:21
подумаем У меня есть прям к нему01:03:25
обращусь так и смотрите в Nav в Nav У01:03:30
меня есть короче вот этот вот или значит01:03:32
что я делаю а о видите чуть по при01:03:35
процессорного уже не написал да Как на01:03:37
смарт гриде делается так давайте вот я01:03:41
Юльку вам покажу я вам сейчас лишки01:03:43
покажу то есть вот я сразу прописываю01:03:45
селекторы а значит лишком Мы отменяем01:03:50
все возможные обтекания Ведь они стоят01:03:52
рядом скорее всего за счёт обтекания вот01:03:54
скорее всего Давайте проверим Кстати это01:03:58
обязательно надо проверять потому что а01:03:59
вдруг они стоят рядом за счёт того что у01:04:01
них ди или кто знает Давайте проверять01:04:06
видите как раз Правильно я проверил тут01:04:09
флот не при чём лишком надо прописать01:04:12
ПБК сделать их блочными опять из блочных01:04:17
смотрим на01:04:18
резуль так вот такая01:04:23
ш теперь что нужно сделать со списком01:04:25
Кто как01:04:27
считает так01:04:31
предлагайте вот Евгений предлагает ли01:04:34
написать дап Я не хочу писать п мли01:04:38
потому что мне гораздо проще написать п01:04:40
N тегу Вот сюда надо вписать п N вот01:04:45
зачем всем гамли задавать Если можно01:04:47
обратиться просто напросто к одному01:04:48
списку Опа нету а вместо этого мы теперь01:04:52
показываем кнопку Вот она наша кнопка01:04:55
Меню tagle вот такой вот div лежит а И01:04:58
значит вот этому div Я так к нему и01:05:01
обращусь Давайте na Men tagle вот ему Я01:05:06
как раз-таки прописываю дисплей блок у01:05:09
него уже есть кое какая вёрстка мы с01:05:11
вами его просто вот физически увидим вот01:05:13
надпись меню Да нормальная такая надпись01:05:15
с виду Можно ещё по центру поставить да01:05:19
То есть можно например в адаптивки в Nav01:05:22
всё сделать ла Cent там для пунктов меню01:05:25
наверно будет не особо красиво но не01:05:26
суть вот появляется такая кнопочка меню01:05:31
скажите дальше-то что делать человек01:05:33
теперь конечно видит что сайт хорошо01:05:36
сделан есть адаптивная вёрстка но что-то01:05:38
нифига ой ой-ой работает вы01:05:41
прикиньте Кошмар01:05:45
какой Так почему она01:05:49
работает01:05:53
работат мы отходим от тем классической01:05:56
вёрстки Да почему работает работает оно01:05:59
вот хове на телефонах неудобно работает01:06:02
оно по одной простой причине потому что01:06:04
кто-то когда-то это уже сделал и01:06:07
прописал вот такую01:06:11
функцию я не буду вдаваться в её01:06:13
подробности мы всё-таки с вами не01:06:15
сегодня проходим Я просто хочу показать01:06:17
вам01:06:18
на вот эти строки Вот про эти строки не01:06:21
думайте Это хитрый наворот смотрите на01:06:22
строки с двадцать треть это jquery вот01:06:27
кто JS не знает даже не пытайтесь это01:06:29
понять кто JS когда-то видел то вот01:06:33
смотрите01:06:34
Да при нажатии на вот этот вот na Men01:06:37
tagle при клике на него мы переходим к01:06:40
элементу меню и вызываем функцию Slide01:06:42
tagle которая на Джес сама точнее в01:06:45
jquery работает феноменальны образом Вот01:06:48
она сама если элемента Нет этот элемент01:06:51
откроет если элемент есть элемент01:06:53
свернёт01:06:54
вот пожалуйста адаптив для01:06:56
менюшки вот что-то типа такого можно01:07:01
сделать То есть ещё один навык да для01:07:03
адаптивки периодически нужен на CSS01:07:06
такое тоже можно сделать но придётся01:07:08
повозиться01:07:09
вот там какими-нибудь скрытыми01:07:11
элементами и так далее но если мы01:07:14
подходим с точки зрения HTML CSS к01:07:16
данному примеру то нас интересует01:07:19
конора01:07:22
с будет вообще Я не знаю поддержите01:07:26
такую идею не поддержите я думаю вообще01:07:28
единый портал сделать и с каждого видео01:07:32
туда Просто ссылки на этот портал и на01:07:34
портале можно скачивать исходники Вот01:07:36
точно также видео01:07:38
смотреть вот такой порта со своими видео01:07:41
со01:07:42
всеми вот да такая будет идея Ну и плюс01:07:46
Чтобы ещё там тусовались01:07:48
комментировали не все спереть по01:07:52
скам меня на сайте рук не хватает чтобы01:07:56
просто сайт переделать01:07:58
себе про говорили не пока не говорили я01:08:01
вам сечас Покажу Покажу чуть позже Ну01:08:04
вот это основа адаптивки Давайте01:08:06
попробуем01:08:09
как-то как-то обобщить то что мы с вами01:08:11
прошли перед тем как двигаться дальше01:08:12
дальше у нас такие больше обзорные темы01:08:14
философские в чём-то обобщая всё01:08:22
сказанное01:08:24
есть если вст плохая Если внутренние01:08:27
элементы прописаны в пикселях если01:08:29
проставлены высоты то вы просто напросто01:08:32
будете биться головой об01:08:35
стену если вка хорошая то всё очень01:08:37
просто Пишем пишем Медиа запросы и01:08:41
главное используем единицы измерений в01:08:43
процентах для внутренних01:08:45
элементов Вот вот01:08:52
ещё Он предлагает адаптировать са дюга01:08:56
редкостный то есть нужно писать вёрстку01:08:58
только в процентах что можно в пикселях01:09:00
по сути Влад тут важно понимать вот01:09:03
что в процентах удобнее писать Вот01:09:06
давайте я задам такой вопрос всем01:09:10
скажите вот у вас01:09:12
есть блок Да и нужно поставить Четыре01:09:17
элемента в ряд сразу интуитивно Скажите01:09:19
Какую нужно ширину в процентах01:09:21
прописать вот чисто интуитивно напишите01:09:25
25 Да Четыре элемента как вы это поняли01:09:28
вот правильно 100 делить на 4 потому что01:09:31
это понятно да это сразу о сотня01:09:33
четвёрка Всё ясно А в пикселях Как вы01:09:35
знаете что здесь писать вы не знаете что01:09:37
здесь писать потому что вот этот блок у01:09:39
него нет фиксированной ширины у01:09:41
родительского блока с продуктами он01:09:43
занимает всё пространство которое не01:09:45
занято левой колонкой Вот то есть01:09:48
занимает всю остальную всю оставшуюся01:09:49
часть и поэтому если вы в пикселях туда01:09:52
будете вписывать значение вы во-первых01:09:54
даже на большом экране Пойте и будете01:09:57
пытаться это как-то высчитать там на01:09:59
листочке бумаги вот поэтому в процентах01:10:01
просто-напросто удобнее писать само по01:10:04
себе Вот и к этому надо привыкнуть вот01:10:07
проценты штука очень хорошая вот так01:10:10
адаптивная вёрстка делается Ну что У01:10:12
кого какие ощущения насколько это сложно01:10:14
просто вот то что вы увидели самые-самые01:10:16
такие основы01:10:18
адаптивки проблем там хватает других но01:10:21
вот это самое01:10:24
база бокса всем блочно прописывать Можно01:10:27
да можно прописывать так не сложно пока01:10:30
норм01:10:31
Просто так даже кто-то пишет Гениально01:10:35
Да ну вот кто обычную вёрстку не очень01:10:40
много да использует кто редко01:10:43
практикуется конечно идея этого вебинара01:10:45
не особо легко Я думаю воспринять если01:10:48
не погрузится контент Необходимо ли01:10:49
задавать минимальную ширину блоком Ну01:10:52
погрузится контент никуда не денется01:10:55
значит вообще я вот вам покажу сейчас01:10:59
кое-что давайте снизим градус позитива01:11:03
Слушайте а что работает что ли Не не01:11:07
работает Всё правильно да давайте01:11:09
снижаем градус позитива и понимаем01:11:12
почему надо забыть про флот и идти на01:11:15
флексбокс работать кто-нибудь из вас01:11:18
знает что это за жесть вообще вот сейчас01:11:20
так вот пишут да01:11:22
было01:11:24
так вот только самые опытные Наверно это01:11:30
знают на самом01:11:32
деле по-моему такая ошибка где-то01:11:35
разобрана на одном из моих ютубовские01:11:44
выше чем два других то вот блок который01:11:47
снизу ИТ он будет встать не сюда есть01:11:50
Оре при01:11:52
мама01:11:54
и вот поскольку здесь есть свободная01:11:55
зона он вот сюда попадает так просит01:11:58
ссылку на Youtube канал да давайте01:12:00
ссылку Подписывайтесь там вроде01:12:01
периодически что-то хорошее выходит вот01:12:06
а и здесь надо делать вообще страшную01:12:08
вещь И именно поэтому флот - это просто01:12:12
кошмар да для верстальщиков Если01:12:14
сравнивать с фкс01:12:16
боксами вот здесь нужно в таком01:12:20
случае прописывать этим элементом01:12:22
несчастным ээ к01:12:25
Boss для каждого вот этого элемента01:12:28
который стоит последнем в ряду нужно01:12:30
идти и писать к бос отменяя обтекание01:12:33
чтобы оптека как бы начиналось заново и01:12:35
приходится мучиться в адаптивки01:12:37
приходится прописывать сначала каждому01:12:40
четвёртому элементу Да вот этому Кле01:12:42
Boss потом каждому третьему элементу Кле01:12:44
Boss потом каждому второму потом каждому01:12:46
первому Какие курсы хорошие посоветуете01:12:49
А да вот СРТ Грид что ждать-то но это01:12:53
если знания htm позволяют Да если01:12:56
материал понятен если материал не особо01:12:58
понятен то лучше как бы другие курсы Да01:13:03
вот лучше подождать01:13:05
конца01:13:07
этого середины февраля там марафон будет01:13:10
и курсы потом01:13:13
будут так А срг - это кто вот уже в теме01:13:16
разбирается и хочет верстать нифига не01:13:18
дела Но это ладно вы что-то слишком рано01:13:21
рекламы захотели вот давайте пока01:13:24
вс-таки кодом ещ позанимаемся01:13:27
Вот вы видели классическую адаптив в01:13:30
классической адаптивки есть свои01:13:34
проблемы Ну как бы главная Подстава в01:13:37
адаптивной вёрстке в классической знаете01:13:39
вот в чём она заключается так да здесь01:13:43
подходит Вадим вот Отвечай на вопрос да01:13:45
подходит выравнивание высот вот смотрите01:13:48
классическая адаптив она пло Вот01:13:50
чем тем что вопервых вну01:13:53
много Медиа запросов А во-вторых01:13:56
во-вторых у нас блоки разорваны по01:14:00
смыслу то есть скажем смотрите вот здесь01:14:02
блоки идут описание шапки идёт описание01:14:05
шапки А дальше описание шапки нам нужно01:14:07
искать фиг знает где где-то внизу а в01:14:09
реальном проекте Хорошо если отделаешься01:14:12
несколькими тысячами строк кода в01:14:14
большом серьёзном таком проекте01:14:20
многостраничное вот одно вверху другое01:14:22
внизу и куча Медиа запросов и постоянно01:14:24
нужно переходить вверх вниз вверх вниз01:14:26
это периодически напрягает во-вторых01:14:28
напрягает то что очень много кода01:14:30
приходится писать вручную одинаково то01:14:32
есть в медиа запросах например писать01:14:34
ширины вот эти раз ширина два ширина три01:14:36
ширина и люди стали думать а как от01:14:39
этого уйти То есть как облегчить себе01:14:42
создание адаптивки Как сделать как01:14:45
попытаться сделать адаптив быстрее и01:14:48
значит был предложен бустра пом вот01:14:51
такой подход интересный я сейчас не буду01:14:54
скачивать bootstrap я вам этот подход01:14:56
покажу налету да то есть я как бы сам01:14:58
его реализую то что сделано в01:15:01
бутстрапе значит смотрите чего придумал01:15:04
бутстрап в своё время это стало такой01:15:07
определённой революцией bootstrap01:15:09
подумал и решил А что люди этим01:15:12
элементам всем пишут какие-то01:15:14
э команды постоянно давайте мы на01:15:17
создаём сразу кучу классов а и эта куча01:15:21
классов у нас будет просто будет Да и мы01:15:24
будем сразу распишем все варианты01:15:27
которые возможны для Ширин и для прочего01:15:30
и будем в HTML вёрстку вписывать эти01:15:33
классы01:15:34
А да с какими-то префиксами и смотрите01:15:37
что сделал bootstrap Вот у меня пока что01:15:40
А вот этот вот пример давайте я его01:15:43
открою bootstrap Style сейчас мы сделаем01:15:45
пародию на bootstrap видите пока что01:15:48
пример какой-то здоровый Да вот все01:15:49
блоки огромные чего предложил сделать01:15:52
bootstrap bootstrap сказал Ребят давайте01:15:55
в сиске сразу наге нери кучу01:15:59
классов в частности будет у нас класс01:16:01
называться Call например будет класс01:16:03
называться01:16:04
Row Вот например класс R будет давать01:16:08
нам как раз-таки отрицательные машины01:16:10
какие-то слева справа Ну например вот01:16:13
так CL ко У нас например знаете что01:16:16
будет делать л у нас будет получать01:16:19
какую-то определённую01:16:22
ширину при этом смотрите как это может01:16:24
выглядеть вот у класса ко допустим01:16:26
прописано что-то такое прописано Ну вот01:16:29
сейчас давайте сделаем ко например01:16:33
и вот эта единичка - это определённая01:16:35
пропорция сколько мы хотим занимать01:16:37
пространство на экране обычно в дизайне01:16:39
когда делается дизайн по сетке сколько01:16:41
обычно колонок самая популярная Кто01:16:44
знает так01:16:50
[музыка]01:16:52
12 примерно такой вот Давайте возьмём01:16:54
число 12 и как-нибудь с ним поработаем01:16:58
вот01:16:59
смотрите когда делается вёрстка по сетке01:17:03
то всегда есть такое понятие как Мешко и01:17:06
размер самого элемента физический размер01:17:09
и вот Получается примерно01:17:12
следующее примерно следующее Выходит то01:17:15
что у нас с вами есть 12 колонок и01:17:17
ширина каждой колонки должна выглядеть01:17:19
примерно как-то01:17:20
так если бы лоно01:17:23
просто 100% разделили на 12 и пожалуйста01:17:27
получили бы это значение вот мы можем01:17:31
100 смотрите что я сейчас хочу сделать я01:17:34
хочу сейчас в Экселе показать ширины01:17:36
которые нам нужны смотрите я могу сотню01:17:40
разделить на 12 и умножить на вот01:17:45
конкретный01:17:46
столбец01:17:48
есть с01:17:52
Мино хотим занять он столбец из 12 то01:17:55
это 833 если 2 то это 1666 и так далее01:17:59
Вот а если нам нужен ЖКО то я сделаю не01:18:02
как впе я сейчас сделаю функцию ка вот01:18:05
такую этот момент не Старайтесь понять01:18:09
на все 100% это вам просто как идея01:18:11
скорее сейчас я вот это сюда01:18:13
скопирую вот что-то типа такого 8 33%01:18:18
Мисти01:18:21
буде01:18:25
соответственно видите здесь 15 пикселе01:18:27
ми 15 знат у каждого ЛБ ма будет 1501:18:30
пикселе Вот и делает кучу Вот таких01:18:34
классов Да смотрите ох сколько мне01:18:38
сейчас придётся сделать Какой01:18:42
кошмар можете пока что-нибудь в чат01:18:44
интересное пописать пока я занимаюсь01:18:51
СТ вы понимали саму идею и понимали01:18:55
удобно Она или01:18:57
неудобно потому что эволюция шла именно01:19:00
через Вот01:19:02
это01:19:04
так конечно это по-нормальному надо01:19:06
делать на процессоре грузить например да01:19:10
все эти классы генерировать но я видите01:19:13
топорно таким образом пойду сейчас это01:19:16
вот ВС повстав надо было коне заранее01:19:18
подготовить чтото я не подумал яма01:19:20
меня-то01:19:21
есть01:19:23
4 есть я с этим не спорю 4 используют01:19:26
лебо активно уже ввели Да в поддержку01:19:31
Вот но 4 свои проблемы01:19:35
есть вот и я как бы Когда вы срг увидите01:19:39
вы поймёте что вам не01:19:41
нужен01:19:43
Так у нас пока затишье Давайте вопросы01:19:46
пишите У кого какие есть может по01:19:48
предыдущему материалу пока я немножко01:19:49
туплю с этими элементами Зато вы видите01:19:52
этил формируются вот сами по01:19:55
себе так да запись вебинара будет на юбе01:20:00
Дока будет Да значит срг сайт мы01:20:03
начинаем верстать уже скоро вот и будут01:20:06
мануалы срг на гитхабе есть срг это от01:20:09
чего и от кого это я сделал и теперь01:20:11
всем Рассказываю что это лучше01:20:13
бустра удивительно было бы если бы я01:20:15
рассказывал другое Да так и вот01:20:18
наконец-то 100% я записываю смотрите01:20:20
какие классы у нас появились01:20:24
вот у нас есть классы каждый класс01:20:27
говорит по SM подробный туториал01:20:29
пожалуйста вот01:20:31
он сейчас Дайте01:20:34
скопирую Так ко 11% Да спасибо да что01:20:39
подсказывайте вот добавляю01:20:44
проценты смотрите Да вот такие классы01:20:47
есть как я тепер с этими классами01:20:48
работаю в H01:20:51
Яру01:20:54
делаю его строкой строка Дат здесь01:20:57
отрицательные Маши01:20:59
вот дальше я что делаю яму например пишу01:21:03
клас и пишу ему например класс 3Т01:21:06
колонки из 12 Давайте посмотрим что от01:21:08
этого произойдёт видите как класс стал01:21:10
меньше по размеру да01:21:13
опа Бам и Меньше01:21:17
стал при этом Кери01:21:21
сде01:21:27
моме яча подробнее попозже расскажу Да01:21:31
вот я пока м саму идею хочу завернуть01:21:35
вот где-то здесь надо реть Да01:21:38
вот вот да и видите я что могу сделать Я01:21:41
могу пойти и всем этим амам скопировать01:21:44
вот такие01:21:51
классы Да прикольно Ни одного Медиа01:21:54
запроса я сам не писал Я просто даже01:21:56
ширины не расписывал я вот так вот01:21:57
сделал лёгкую сеточку то есть заранее на01:22:01
генерировать ширину этих блоков вот а01:22:05
как делать дальше как делать адаптив в01:22:07
стиле01:22:08
бустра копируем весь ужас Вот этот01:22:12
смотрите Что делаем01:22:14
дальше я копа вот это вот всё так Да01:22:18
теперь кучу классов довать Гляньте что я01:22:21
делаю01:22:24
прич вот я вот так вот01:22:27
за за01:22:29
на например01:22:33
Ой01:22:36
ошибочка как делает01:22:39
адаптив Какую он Принс идею прописан01:22:42
один Медиа запрос заранее Да вот так вот01:22:51
ме например там ну медиум экран там01:22:55
допустим 920 пикселей у них будет стра01:22:57
по-моему 992 если я не ошибаюсь Вот и01:23:00
здесь короче прописан эти клас01:23:03
Да точно также точно такой же код и01:23:07
смысл заключается вот в чём то что мы с01:23:10
вами сначала вот такими классами делаем01:23:12
на большие экраны разметку а потом на01:23:15
маленькие экрана чтобы сделать разметку01:23:17
мне достаточно просто пойти и вот тут01:23:19
вот так вот написать например я пишу01:23:21
Call 3 А дальше Call01:23:23
md6 Вот давайте посмотрим на то как01:23:26
делается адаптив Вот сюда доставляю Call01:23:28
md6 Call md6 Call md6 Call01:23:31
md6 и смотрите на01:23:35
результат что-то ничего не работает01:23:39
да Так даже интересно где ошибся если01:23:42
кто заметил опечатку говорите а01:23:45
почему-то лас Call md6 у меня не01:23:47
отработал то ли я стили по нему какие-то01:23:50
кривые написал То ли ещё что-то01:23:54
так мелко Да так ВМ ошибку говорят01:23:58
сделал Сейчас погодите-ка01:24:00
секунду mawi 992 так скрин Вроде01:24:04
правильно01:24:05
написано буп не делит экран на 1201:24:09
областей делит Вот я и разделил как01:24:10
бутстрап это делает Так слушайте Вот01:24:14
первые классы у нас отлично применялись01:24:16
во вторых я чувствую я где-то просто01:24:17
сделал какую-то глупую01:24:19
опечатку класс ко md6 у нас вроде есть01:24:26
так вот класс есть Так какую-то кавычку01:24:30
может не у нас почему-то Не отрабатывает01:24:32
Медиа запрос Вот давайте вот так вот01:24:35
диагностируем я попробую Медиа запрос01:24:37
сначала сам01:24:39
стереть так не просто вот ком d6 есть01:24:43
такой класс он сделал каль 50% мину 3001:24:46
пикселе так да Видите меди01:24:51
применили блоки что-то остались01:24:53
какими-то01:24:54
маленькими а всё спасибо дадада это01:24:58
флексбокс уже ведут себя так что спасают01:25:03
адаптив вот сейчас я думаю всё будет01:25:06
нормально да Вот видите вот пожалуйста01:25:08
просто прописали Ко md6 и вот наша01:25:12
адаптив Вот так вот решил это делать Бу01:25:16
для более мелких экранов тоже такой же01:25:18
самы01:25:20
иде в томбы ста просто тупо расстав вот01:25:24
эти классы01:25:25
и у него всё становилось адаптивно Вот01:25:28
кто что думает по поводу такой идеи это01:25:31
был один из таких эволюционных шагов в01:25:33
адаптивной вёрстке так кто-то пишет01:25:37
легко кто-то пишет наоборот гемор так01:25:40
вот пишут не очень Давайте ругайте01:25:42
бустра Я всегда это люблю так это не01:25:44
лечится много классов тупо шикарно ну01:25:46
вот видите все по-разному относятся к01:25:48
этому делу проблема какая проблема в01:25:51
дублировании кода идёт Да вот то что вот01:25:53
это вот постоянно мы должны прописать01:25:55
каждому элементу во-первых мы даём много01:25:57
классов Да во-вторых мы должны каждому01:25:59
элементу это01:26:00
прописать в-третьих01:26:03
есть проблемы с отступами Ну вот в01:26:05
бустра 4 короче много проблем будет01:26:07
исправлено буп 4 нормально Вот буп 3 на01:26:10
флотах это сейчас совсем жесть а как бы01:26:12
Boot 4 Ну неплохо себя будет01:26:15
чувствовать Вот но как бы тут куча кода01:26:18
изначально01:26:19
есть у вас изначально определённое01:26:22
количество брейкпоинт Ну и главная01:26:25
конечно проблема - Это если блоки должны01:26:27
стоять не симметрично то главная01:26:29
Проблема в том что им придётся писать01:26:30
какие-то разные вещи вот на бутстрапе01:26:33
знаете как это выглядело бы Представьте01:26:34
что здесь кол md5 написано вот в том01:26:36
бутстрапе в котором ещё Флек боксов нету01:26:39
вот у нас бы тогда блоки здесь стояли бы01:26:42
не совсем по01:26:44
центру Так что я тут01:26:47
натворил я опять короче умудрился01:26:50
сделать так что ничего не работает01:26:52
так каким-то01:26:54
чудом вот ну видите не хотят в стиле бу01:26:58
у нас работать эти01:26:59
элементы вот а получается то что если бы01:27:02
блоки были уже то они как бы стояли бы с01:27:04
левой стороны пришлось ставить оффсеты и01:27:07
было бы короче куча проблем На бутстрапе01:27:09
в этом плане Кто хочет глянуть видео вот01:27:12
где я буп просто очень жёстко ноб да то01:27:18
сечас я вам попробую най это вот вот01:27:20
здесь вот самое жёсткое видео про буд01:27:24
самое жёсткое специально в НМ даже01:27:25
комменты отключил Чтобы люди не это не01:27:29
писали ничего вот чтобы не разгорались01:27:31
споры по поводу того хорошо или01:27:34
плохо так вот можете потом это видео01:27:39
посмотреть Ну ладно короче вот такую01:27:42
идею Принс буп Да Принс бутстрап е стали01:27:46
использовать она захватила мир и потом в01:27:49
СГ Я01:27:51
просто и модернизировал вот Но это с01:27:54
одной стороны был такой заход ещ были01:27:57
флебос плюсу Кто кбо хочет увидеть01:28:00
чучуть вот а то может01:28:02
нафиг вот по фкс боксам на юбе тоже есть01:28:05
вебинар подробный Кто хочет тоже может01:28:09
глянуть Вот fxb это очень крутая вещь у01:28:12
которой есть замечательное свойство01:28:14
такое очень интересно вот я вам сейчас01:28:16
просто покажу01:28:18
как быстро можно делать вёрстку набо вот01:28:22
самые простые идеи Давайте Ну так так01:28:25
так вообще вот просят перерыв Да не надо01:28:28
перерыв у нас вебинар Ещё минут 2001:28:30
продлится вот так что Так что нормально01:28:33
Я думаю так ну давайте я что-нибудь01:28:36
сделаю Давайте что-нибудь сделаю хорошее01:28:38
например уберу Вот01:28:40
это Например уберу Вот это так всё стёр01:28:45
как обычно ИТ идея лесов заключалась в01:28:48
создании неких гибких блоков кото рано01:28:51
сжи01:28:52
Като оден размера а потом01:28:55
начинают как01:28:58
бы потом начинают что-то делать Да01:29:00
как-то01:29:03
переноситься ну смотрите вот что такое01:29:06
флексбокс Вот вы все привыкли писать01:29:08
флоты а теперь увидите флексбокс мы01:29:10
просто тупо в01:29:12
строке в строке Да вот Обратите внимание01:29:14
на классы вот01:29:18
есть мы вот здесь берм и пишем что-то01:29:21
такое пишем плей01:29:23
Flex это приводит к тому что у нас все01:29:26
элементы становятся горизонтальны Вот01:29:29
как-то так А как будто бы написали flot01:29:32
Left но но теперь можно делать очень01:29:36
много всяких хороших вещей а в частности01:29:39
во флексбокс великолепно работают всякие01:29:41
горизонтальные и вертикальные01:29:42
выравнивания и ещё во флексбокс есть01:29:44
одна Великолепная идея которая очень01:29:47
хорошо зашла в адаптивную вёрстку01:29:49
смотрите Какая идея а мы берм и этим01:29:54
блоком прописываем какой-либо размер Ну01:29:56
давайте я этим блоком пропишу размер01:29:58
допустим01:29:59
там айте давайте пропишу размер ви Ну01:30:04
сколько01:30:05
зададим Давайте 30%01:30:08
зададим01:30:10
так о ну нормально вроде 30% марны01:30:15
какие-то есть может01:30:20
даме первый момент вот задали блоком01:30:23
какую-то ширину второй момент который01:30:26
появился в этих01:30:28
самых боксах это возможность отличных01:30:35
выравниванию выравнивание по горизонталь01:30:38
Например я могу написать что-нибудь01:30:39
классное типа центр все блоки станут по01:30:42
центру либо можно написать как-то Вот J01:30:45
cont Space это разделит маржи тоже очень01:30:48
классным образом01:30:50
и растояние между элементами равномерно01:30:53
Вот посмотрите как это выглядит во01:30:55
флотах такого нет вот нам не надо ни01:30:58
марны писать ни какие-то сложные01:30:59
штуковины всё хорошо Да всё работает01:31:02
чётко вот элементы тут уменьшаются01:31:04
Работают Работают но видите здесь не01:31:10
было здесь элементы дальше продолжают01:31:12
сжиматься и поэтому есть такая Волшебная01:31:15
штука которая01:31:17
называется это по большому счёту01:31:20
аналог01:31:22
вот такое вот значение интересное01:31:24
которое говорит на каком размере элемент01:31:27
начинает драться за ну на каком размере01:31:32
элемент не хочет дальше сжиматься для01:31:34
того чтобы это работало нормально я ещё01:31:36
должен прописать вот такую01:31:38
магию Это значит что элементы могут01:31:40
переноситься и смотрите Я могу например01:31:42
прописать 30001:31:44
пикселе так гдето01:31:47
опечатка или нет Вот точки запятой не01:31:51
хватает вот смотрите как это будет01:31:53
работать теперь о красота какая Гляньте01:31:57
элементы сжимаются сжимаются сжимаются и01:32:00
когда элемент становится меньше 30001:32:01
пикселей он просто-напросто соскакивает01:32:03
вниз Опа Гляньте какое01:32:08
чудо Я не прописывал никаких Медиа01:32:11
запросов А работает всё так как будто бы01:32:13
у меня Медиа запросы по01:32:15
написаны правда01:32:19
чудо01:32:20
ВМ в том что они дальше Всё равно могут01:32:23
сжиматься то есть Flex Bis он за него01:32:25
борется Но если что он сожмётся а minv01:32:28
он так и останется так вот пишут01:32:30
Гениально вот на курсе про Smart Грид01:32:32
первые два урока - это как раз подробно01:32:34
про флексбокс потому что там01:32:35
возможностей просто невероятное01:32:36
количество в этой технологии вот плюсу01:32:39
те да кому флексбокс понравились01:32:44
так на курсе Ну на курсе Да я флексбокс01:32:47
там два урока подробно с домашними01:32:49
заданиями с разбором01:32:50
ДЗ вот а дальше что спрашивают А дальше01:32:53
вот какая проблема а пишут без медия не01:32:56
обойтись Но вот здесь вот я без медия01:32:58
обошёлся Как вы видите Да всё хорошо но01:33:01
это частный случай Если бы у нас с вами01:33:04
было не три элемента а скажем четыре то01:33:07
вся вот эта красота флексбокс она была01:33:09
бы немножко01:33:19
подпорная поставлю 20001:33:23
так вот01:33:24
проблема такого примера будет01:33:26
заключаться в следующем то что если мы с01:33:28
вами работаем с флексбокс без Медиа01:33:31
запросов то у нас при вот этой01:33:33
гениальной Как вы написали в схеме01:33:35
всегда отскакивает только один элемент и01:33:38
оно конечно и нормально но всё равно это01:33:40
не то то есть дизайнер не полюбит такую01:33:43
вёрстку дизайнер скажет Ну товарищ Ну ты01:33:45
что совсем оборзел что ли два элемента01:33:47
должны сразу соскакивает01:33:51
Вот и видите во флексбокс Счастье есть01:33:54
но как01:33:56
бы не совсем то получается что нужно Да01:33:59
вот иногда придётся тогда Медиа запросы01:34:01
писать Да и по сетке тут не так легко01:34:03
выровнять вот пишут как её и Как же01:34:07
тогда быть А вот теперь мы пришли к01:34:09
Смарт гду вот там счастье полное просто01:34:11
Смарт Грид это я его когда писал я давно01:34:14
хотел такую идею реализовать и01:34:17
получилось совместить вообще Вот Все01:34:18
идеи которые были Сейчас вы увидите01:34:20
совме01:34:24
и сетки Т Кто из вас слышал про такую01:34:28
вещь как при01:34:30
процессоры01:34:34
так так плюсы так Слышали многие Да так01:34:39
вот значит смотрите в чём соль в том что01:34:42
когда делает такие01:34:50
классы если бы это были примеси при01:34:53
процессорах то есть некие функции то01:34:55
можно было бы при написании нашей с вами01:34:58
вёрстки самой такой обычной нормальной01:35:00
вёрстки здесь можно было бы брать01:35:03
и как бы вот сюда вызывать вот эти вот01:35:07
вещи да то есть сюда прикончить ширину01:35:10
из готовой примеси и вот что из этого01:35:13
вышло Сейчас вы увидите срг SM ве очень01:35:17
простая в использовании но требует очень01:35:20
Рой че база для того чтобы Вы могли ею01:35:22
пользоваться Smart Grid требует отличное01:35:24
понимание Флек боксов Smart Grid требует01:35:27
умение работать с Note JS и Gal и01:35:29
поэтому на курсе Smart Грид получается01:35:31
Забавно то что сам Smart Грид изучается01:35:33
всего два урока а остальное всё время01:35:35
идёт на флексбокс на препроцессоры на01:35:37
galp Note JS Вот давайте сделаем пример01:35:41
который я вам показывал на бутстрапе на01:35:43
bootstrap стиле вот такой вот пример01:35:45
только сделаем его на Спарт гриде Так01:35:47
признавайтесь кто из вас как относится к01:35:49
консоли вот такие01:35:53
вот такие вот у нас белые буквы на01:35:56
чёрном фоне Есть ли люди которые01:35:58
панически боятся консоли считают то что01:36:00
это какие-то эти только бородатые01:36:03
программисты могут в консоли01:36:06
сидеть01:36:08
так так так так Да вот по-разному01:36:12
по-разному там всё просто на самом деле01:36:15
не переживайте надо в папочку в другую01:36:19
перейти Так сейчас я как раз посмотрю01:36:22
как эта папка называется какой папке у01:36:24
меня тут всё есть Smart Smart L5 такая01:36:27
вот01:36:28
папка Сейчас вы увидите кучу технологий01:36:30
Да новых и запоминайте пожалуйста эти01:36:34
технологии пойдёте вы на курс по Смарт01:36:36
гду или вы и так хорошо себя чувствуете01:36:39
запоминайте те технологии которые здесь01:36:41
вы увидите И not JS и GP и при01:36:45
процессоры потому что на собеседованиях01:36:47
это всё спрашивают это всё сейчас нужно01:36:49
Да как бы SM е не спрашивают е не01:36:52
раскрутился проект так как надо Да вот01:36:55
Всему своё время вот те технологии01:36:56
спрашивают все так01:36:59
вот Я сейчас запущу01:37:04
Для чего нужен для грида но для грида01:37:09
нужен чтобы Грид собрать я это покажу01:37:11
чуть позже вообще идея Смарт грида01:37:13
заключается в том что мы с вами он01:37:17
ва вот01:37:20
вот01:37:23
любое количество колонок один из че01:37:25
процессоров выбираем CS и вот меж01:37:29
колонок расставляем Есть огромное01:37:31
количество настроек но это не серверный01:37:34
язык это да это серверный JavaScript но01:37:35
nm и отлично работает на локальной01:37:38
машине вот Ага здесь у меня да Для того01:37:41
чтобы делать сборку у меня здесь для01:37:43
других задач вот сейчас то что вы01:37:45
увидите для многих может показа магией01:37:50
дава в стилях пойду и очень многое01:37:53
сотру01:37:55
Так давайте вот это вот сотру Давайте01:37:58
вот это вот сотру тут вы видите стили01:38:01
как-то написаны может быть для кого-то01:38:03
немножко странным покажется вот это вот01:38:05
пому 912 да Много скачивают сейчас очень01:38:09
даже прилично скачивают Так значит не01:38:12
обращайте внимания на вот эти вот01:38:14
надписи это всё написано на01:38:16
лсе кто захочет это всё сможет изучить01:38:21
вот смотрите свиду кажется полный отстой01:38:24
да то есть ничего не СВР свиду Ну вот01:38:28
посмотрите разве что это вёрстка01:38:31
да ну вёрстка точнее но одноконная01:38:34
какая-то и значит смотрите как работает01:38:36
Smart вот я вам просто хочу показать01:38:38
общую идею стрею из бустра и01:38:41
оптимизированную и модернизированную сгд01:38:43
для адаптивной вёрстки выглядит Вот так01:38:46
мы работаем как на бутстрапе но мы01:38:49
вызываем примеси вот здесь01:38:52
и при вызове примеси автоматически сюда01:38:54
при процессор подтягивает нужную штуку01:38:57
Опа например написал Вот что-то01:39:00
произошло дальше смотрите А вот это это01:39:02
элемент и элементу мы прописываем как и01:39:05
в варианте Да по задумке но мы это01:39:08
прописываем не в H мы не портим классами01:39:10
нашу hl структуру Мы это прописываем в01:39:12
CSS Например я01:39:14
пишу Вот так01:39:18
вотже ЛМ Например я говорю ты должен01:39:22
стать по ширине столбцом Т01:39:26
Опа смотрите какой он стал01:39:29
да три колонки занимает А дальше я01:39:32
говорю Слушай а вот на другом экране на01:39:34
экране MD а не стал бы ты пятёрочкой вот01:39:38
так вот Давайте посмотрим Опа стал01:39:42
пятёрочкой на экране MD Да нормально Опа01:39:45
А кто в браузере F5 тыкает Евгений А это01:39:48
чудеса это браузер синх офигенная вещь01:39:51
на курсе буду её показывать01:39:53
тоже браузер сам обновляется это очень01:39:55
удобно для вёрстки Да совершенно01:39:59
верно Так давайте сейчас ещё01:40:02
какую-нибудь супер примесь напишем01:40:04
Content только не такой А примесь мою01:40:08
так jy Content MD01:40:11
центр Да мне ж на мдшник надо чтобы оно01:40:15
ровно стояло красиво Опа Смотрите по01:40:17
центру01:40:19
стоит01:40:22
вот спрашивают в чате бесплатно Нет01:40:24
даур конечно он бесплатный Вот Но этим01:40:27
надо научиться пользоваться вот на курсе01:40:30
буду показывать курс кто спрашивает где01:40:33
это посмотреть сейчас я вам в чат скину01:40:35
ссылку вот и также Smart дальше работает01:40:38
наме смотрите ко например01:40:41
SM 6 я хочу сделать побольше Да а на01:40:44
экране Я хочу поставить значение 1001:40:47
например лц и смотрите вот так вот01:40:49
ничего не делая написали полностью01:40:53
адаптив опа опа всё01:40:56
работает у кого Какое ощущение от такого01:40:59
способа писать код вот первое01:41:02
впечатление от того что вы вот здесь вот01:41:06
видите01:41:08
так Подходит ли для больших сайтов01:41:11
подходит только нужно писать по01:41:14
бму не ударяясь по вложенности которые01:41:17
дают нам процессоры так Рави рот открыл01:41:22
просто мурашки и покажи нативный CSS на01:41:25
выхлопе Да вот те кто попыт наверно01:41:27
ожидают что CSS там отстойный А я вам01:41:29
сейчас покажу и CSS там01:41:32
отличный неотличимы от написанного01:41:34
человеком А знаете что это почему так01:41:37
получается каждая примесь генерирует01:41:40
Медиа запрос и код был бы на выходе01:41:41
совершенно отстойный нога применяет01:41:46
Group вот у меня давно была идея сделать01:41:49
такую сетку при процессор но до тех пор01:41:51
пока не появился GR Med такие сетки01:41:54
давали бы отвратительный код вот а тут01:41:56
получается то что код на выходе CSS01:41:58
видите вообще не отличи от того что01:42:00
написано человек притом смотрите чем срг01:42:04
ещё лучше бустра вот впе у вас всегда01:42:07
есть пять брейк поинтов вот и всё И01:42:10
больше брейк поинтов нет а вот тут вы01:42:12
например понимаете что на таком экране01:42:14
вам нужно-то было бы поменять вст это01:42:19
дет01:42:23
идм в фай настройки срг вот01:42:25
сюда так вот он SMS и мы прописываем ещё01:42:30
один Вот я например делаю XS допустим01:42:34
мне надо сделать это для самых маленьких01:42:36
телефонов например там 38001:42:39
пикселей вот так01:42:41
вот что делаю дальше Дальше я должен01:42:49
генерировать Опа у нас появился перее01:42:53
нери Файлик Смарт грида вот этот вот01:42:56
появился вот этот01:42:58
самый появилась примесь на на01:43:02
xxs вот оно появилось а И теперь я что01:43:06
могу сделать я сейчас снова запущу gpw01:43:08
вот такого в бутстрапе нет у них пять01:43:13
брейкпоинт у вас не будет а у меня будет01:43:16
Сейчас я вам покажу как это выглядит так01:43:19
вот открылся проект01:43:21
Да сейчас01:43:22
я беру и01:43:35
дописывает очень маленьким бац и01:43:37
увеличился о и01:43:40
работает вот здесь чудесных вещей очень01:43:43
много и код на выходе само01:43:49
Лав01:43:51
не думал ли собрать программку для01:43:53
ленивых знаете когда время будет я01:43:57
сделаю конструктор сайтов Да вот и как01:44:01
бы ну попробуй точнее его сделать а то01:44:05
всё AD делает свои эти странные юзы там01:44:08
ещё что-то01:44:09
делает Вот сколько ушло на разработку Да01:44:12
быстро разработал я даже на на учился01:44:14
программировать01:44:16
пока за сутки язы вы01:44:19
су и прочее работает на нашей машине01:44:22
пока мы кодим Дага собирает нам чисто01:44:24
CSS HTML Совершенно01:44:26
верно Так и есть и притом срг нужно01:44:30
сгенерировать только один раз при старте01:44:31
проекта А дальше в одном из вариантов01:44:33
используем либо либо SAS либо scss либо01:44:37
ste насколько хорошо обучают01:44:39
препроцессоры В смысле обучают насколько01:44:40
хорошо мы обучаем при процессорам или01:44:42
насколько хорошо вас обучают чему-то при01:44:44
процессоры вот мы на препроцессоры дам01:44:47
один урок для того чтобы в них пройти01:44:52
как вызов приме и опе наме но мы всегда01:44:57
ученикам дам бонусы то есть всегда вот01:45:00
те кто были на курсе Смарт грида01:45:02
отпишитесь Вот тут я знаю по-любому01:45:03
сидят те кто СГ уже проходили просто01:45:05
ходят и тусуются по вечерам так вот01:45:08
Сергей пишет плюс я вижу где-то скрылся01:45:11
Да вот он точно01:45:17
[музыка]01:45:19
проходил01:45:23
то что бонусом давал видео посу и по01:45:26
сасу01:45:28
подробно Да заскучал и правда вот то01:45:32
есть там самую базу прошли01:45:34
и потом дали бонусом01:45:38
посмотреть чтобы вообще глубоко изучить01:45:41
Кто хочет с - это графический интерфейс01:45:44
не это не графический Интер это01:45:46
генератор кода Томы свам наком01:45:49
яке сама э ставится лучший способ01:45:53
адаптивной вёрстки срг Ну я я так считаю01:45:55
да я так считаю Вот лично я так бонусное01:45:58
видео по лсу Ну кто на курс запишется01:46:00
тому будет бонусное видео по лсу Почему01:46:02
нет и по гиту потом бонусные видео даём01:46:06
И вообще много бонусов даём вот по01:46:09
поводу кроссбраузерность меня спрашивали01:46:11
Да про Smart Грид значит э как01:46:15
бы кроссбраузерность у Смарт грида01:46:18
достаточно01:46:19
э различна в зависимости от того как вы01:46:22
делаете01:46:23
вёрстку если если вот я сейчас на зайду01:46:28
Да если мы используем срг с межком01:46:31
сделанным в пикселях то тогда там01:46:33
используется функция И как вы видите01:46:36
здесь есть проблема с о о по сути я не01:46:39
знаю кто сейчас пользуется Вот честно01:46:41
Кто сидит в Интернете с01:46:49
вот делаю как бы спокойно Несмотря на то01:46:53
что ми это не поддерживается Если же мы01:46:55
используем сгд сделанный с меж01:47:00
колоночная поддержка как и у фкс боксов01:47:04
вот 97 38% на эти браузеры не смотрите01:47:08
уже даже Boot 4 от них отказался сказал01:47:10
Да пошли вы вечно из-за вас проблемы01:47:13
из-за вот этой колонки Ну все знают про01:47:15
эту колонку Да я думаю кто вёрст01:47:17
занимается про левую вот01:47:20
и как бы поэтому сгд он01:47:23
кроссбраузерность хорошая01:47:24
кроссбраузерность Если меж колоночки01:47:26
писать в процентах просто абсолютна вот01:47:28
если школоник в пикселях то там забиваем01:47:30
на оми и Можно например для неё отдельно01:47:32
стили подключать Вот такие01:47:37
дела Ну вот я вас и приглашаю на Smart01:47:40
ГД вообще кому понравилось так верстать01:47:42
вот как бы вот так вот как вы видите вот01:47:45
эти вот Call R Вот вот так вот пишем оно01:47:47
само всё делается так01:47:52
так интересно плюсую да ну нормально01:47:56
нормально Вот пишут даже скучно да Пит01:47:59
даже Скучно так верстать Согласен01:48:01
Так так никаких проблем нету вот меня01:48:06
порадовал комментарий на юбе или где-то01:48:08
ещё Я вот не помню какому видео было это01:48:12
дано Да какому видео был этот01:48:19
коммента01:48:21
вот Толи к этому оставить короче комент01:48:24
такой забавный ти взял01:48:27
и это на собеседование адаптив за 1501:48:30
минут сделал Вот и все очень сильно01:48:32
удивились типа как так что пришёл01:48:34
человек на собеседование дали сделать01:48:36
адаптив 15 минут расставил работает и01:48:40
все такие типа что это такое01:48:49
вообще на Ютюбе У меня есть плейлист01:48:52
специальный где я достаточно подробно01:48:54
рассказываю о сути этой технологии вот01:48:56
он этот плейлист вот там просто по шагам01:48:59
рассказываю В чём основа Смарт грида Как01:49:02
это работает изнутри и можете это01:49:04
посмотреть Вот Ну а на курсе там главное01:49:07
Что изучается не только Smart Грид но и01:49:09
все Ну нужные новые технологии и npm ига01:49:13
проходится и так далее и так далее вот01:49:16
вообще я честно скажу так вот меня01:49:18
спрашивают там Хорошая вещь сгд или01:49:21
нехорошая Я очень сильно не любил01:49:23
верстать пока не сделал СР Грид вот я01:49:25
просто вот не то чтобы ненавидел вёрстку01:49:27
но я не любил её вот а как сгд01:49:32
появился стало всё хорошо будет курс01:49:35
издаваться в стиле DVD не могу01:49:38
присутствовать Ну никаких DVD нету но01:49:41
Смотрите кто не может присутствовать мы01:49:44
видеозаписи даём через 2 часа Примерно01:49:46
после окончания урока Так что в записи01:49:49
всё всегда есть всегда можно01:49:51
пересмотреть вот а так вообще на курсе и01:49:53
записи есть и разбор ДЗ есть01:49:55
индивидуальный фактически для каждого и01:49:57
много ещё что01:49:58
хорошего тут я неправильный маркетолог01:50:01
Наверное я на лендинге обычно половины01:50:05
не указываю хорошего что есть Вот01:50:07
наверное я не прав вот да как01:50:11
бы Сколько длится он длится 3 недели01:50:14
шесть уроков по вторникам пятницам в 801:50:17
вечера по Москве01:50:19
а01:50:20
вот на страничке вся информация есть01:50:22
сейчас ещё скидки01:50:23
висят 2 дня Будут ещё висеть скидки01:50:27
текущая цена там 5700 по-моему01:50:30
Вот такие дела Ну что Кто хочет на курс01:50:33
пишите есть такие Нет там у нас01:50:35
записавшихся01:50:37
сейчас сколько-то есть человек 11 что ли01:50:40
помоему записано на СР На текущий01:50:43
поток вот01:50:46
так01:50:49
нагода вижу плюсики есть а курсы Да я01:50:52
провожу этот курс курс полностью моя01:50:55
разработка вот как бы хочу Ну на01:50:58
следующий Ну понятно следующие тоже01:51:00
будут через какое-то время как понять01:51:03
потянули курс по Smart gre если знаю01:51:05
основу аш тем или CSS но практики01:51:07
вёрстки нет вот смотрите как понять да01:51:09
Для кого этот курс какие нужны начальные01:51:11
знания если вам был вот этот материал01:51:13
понятен вы курс потянет потому что там01:51:16
есть страшные вещи но ДЗ G там ещё01:51:18
что-то такое на самом деле01:51:21
нужно просто понять Как это01:51:22
настраивается один раз посмотреть как01:51:24
настроено это ВС дело Да вот а как01:51:27
бы сложных вещей там не будет там вот01:51:30
будет вызов приси иксбокса то есть по01:51:32
сути если был понятен сегодняшний01:51:33
материал то курс потянет и обычно Если01:51:37
вы когда-либо адаптив делали Медиа01:51:39
запросы вручную писали то значит вы на01:51:41
курс можете идти вот если вы ну вообще01:51:44
никогда не делали адаптив и только01:51:46
новичок в CSS то тогда конечно курс01:51:49
может оказаться сложновато все01:51:52
технологии которые будут на курсе01:51:54
смотрите первые два урока флексбокс01:51:56
изучаем флексбокс от и до так чтобы вы01:51:58
их знали просто влёт вот всё что угодно01:52:00
могли на них писать а третий урок - это01:52:03
введение в препроцессоры показываем Ой01:52:06
нене не01:52:07
стоп третий урок not JS и GP not JS01:52:12
galp все плагины галп которые нужны01:52:15
опять же браузер Син Вот это чудо01:52:16
которое вы видели когда само всё01:52:18
обновляется мы делаем удобный удобную01:52:20
сборку проекта это нужно везде это вот01:52:22
сейчас везде Абсолютно требует01:52:24
соответственно четвёртый урок - это при01:52:26
процессоры После него даётся два видео01:52:28
бонусом кто захочет глубже изучить с или01:52:31
SAS и потом изучается Smart Грид всякие01:52:33
приёмы связанные с ним и вся вёрстка А01:52:36
вот как-то так01:52:38
а на собеседовании про адаптив01:52:40
спрашивают Ну конечно спрашивают куда же01:52:43
без адаптивки в современном мире Вот01:52:46
такие вот дела Так что кому интересно01:52:48
Приходите курс стартует с д сего числа01:52:53
Вот давайте сейчас пока посмотрю вкладку01:52:55
вопрос так что делать с большими01:52:58
таблицами ой таблица на мобильном01:53:00
телефоне - Это вообще жесть это убиться01:53:03
Можно мы с таблицами Единственное что01:53:05
придумали это вот как раз Кан достал01:53:07
если Кан ещё не01:53:10
ушёл Да из трансляции он короче вот так01:53:13
сделал Когда мы оставляем информационный01:53:16
столбец слева а все остальные колонки в01:53:19
сравнени г должны были быть видите было01:53:21
три колонки жем сделали вот такой вот01:53:23
слайдер вот вроде так нормально01:53:26
получилось Да потому что таблицу на01:53:28
мобилке адаптировать вообще ну непонятно01:53:32
как на одном из сайтов я сделал вот так01:53:34
в частности вот есть H SH такой сайт и я01:53:37
здесь адаптировал таблицу под мобильник01:53:39
вот таким образом я вообще очень01:53:41
жестокую вещь сделал Я на мобильника для01:53:44
такой небой табли написа шм смотрите что01:53:48
проо идт на телефоне бам И вот так вот01:53:51
неплохо смотрится01:53:53
Вроде вот так что с таблицами это всегда01:53:55
фантазия это всегда беда на телефоне01:53:58
Какой первый урок первый урок ЛС01:54:01
Напишите ориентир на обучение через один01:54:03
В смысле Когда будет новый поток Смарт01:54:05
грида Смотря какой популярностью будет01:54:06
пользоваться поток текущий Я думаю01:54:08
ориентировочно где-то апрель вот в этот01:54:10
поток вроде люди записываются активно01:54:12
Перед Новым годом поток был поменьше в01:54:14
этот раз записываются вроде пока01:54:16
хорошо Даже несмотря на то что01:54:20
как бы только с юба ссылки сейчас больше01:54:22
популярность за границе набира систему01:54:24
визуального01:54:25
дизайна интерфейс через что-то там СГ01:54:28
используется для чной вёрстки не шаг это01:54:30
в сторону смотрите СГ СГ01:54:34
дальше я надеюсь перевести визуальный01:54:37
вариант То есть я немножко подумываю над01:54:40
тем чтобы сделать Смарт Грид из01:54:43
графического01:54:48
ирим е никто не придумал нормальный01:54:50
графический интерфейс для конструкторов01:54:52
Сай на выходе всегда получается01:54:54
отвратительный код что что ещ где-то вот01:54:58
сейчас разные странные программы вот01:55:01
есть интересная01:55:03
программа вот тоже Шаг в эту сторону но01:55:06
не обнулить ли это знание знатоков Ну01:55:08
вот да Я вот всё не хочу начинать делать01:55:12
графический интерфейс срг потому что а01:55:14
вдруг получится сделать хорошо что тогда01:55:18
делать верстаком по жизни ска01:55:20
если Вот представте не надо даже так01:55:22
писать а нужно будет просто мышкой01:55:24
нажимать сколько столбцов На каком01:55:26
экране у вас01:55:27
занимает Вот поэтому я с опаской подхожу01:55:30
к этому вопросу Вот и пока не тороплюсь01:55:33
с этим делом Ну что плюсу если в целом01:55:36
вам понятна тема адаптивки если поняли01:55:39
как шла эволюция в этом процессе значит01:55:43
Видел один из01:55:44
вопросов что деть C01:55:48
натив01:55:50
а сложный вопрос во-первых он ещё не01:55:52
вышел Выйдет через месяцок во-вторых01:55:55
использовать это можно будет только01:55:56
через полгода или через полтора года и01:55:59
в-третьих он всё равно вас заставит01:56:01
писать Медиа запросы вручную вот а мы01:56:04
потом посмотрим как его в Smart Грид01:56:07
интегрировать Куда поступать на ой Вот01:56:10
вот мне вопросы продизайн лучше не01:56:11
задавать я такой дизайнер Вот кто был на01:56:14
моих других вебинарах знает как я рисую01:56:16
когда что-то демонстрирую может быть01:56:19
кто-то есть01:56:20
то01:56:22
витов получается рисовать или е чтото01:56:25
котики01:56:27
вот да Или01:56:29
шашлыки вот Ну ничего01:56:32
ничего короче с вещ хорошая Вот честно01:56:36
хоро запись вебинара текущего будет на01:56:39
юбе Подписывайтесь там мы его выложим но01:56:43
и собственно говоря Приходите01:56:48
на вот рекомендую всем посмотреть на01:56:51
него Так где скачать исходники Смарт01:56:54
грида Ну смотрите вот те из вас Кто01:56:55
опытный Да Smart Грид он в каком виде01:56:57
может быть бесплатным для кого-то Если01:57:00
вы сами знаете такие темы как Note JS01:57:04
galp npm ещё чего-то то вы можете зайти01:57:07
Вот по такому адресу npm Ja package01:57:09
Smart Grid вот скачать этот Smart GD и с01:57:13
ним повозиться Ну там 912 скачиваний за01:57:16
месяц 253 за неделю кто-то тырит его01:57:18
Потихоньку Да01:57:20
какие-то люди Вот ссылка на01:57:23
github Вот она тут есть Исходный код срг01:57:26
11 лайков кто-то мне поставил не знаю01:57:28
даже кто это сделал01:57:30
вот вот такие дела Ну что На этом01:57:34
пожалуй Всё мы с вами засиделись01:57:36
немножко время пересидеть из-за того что01:57:38
был технический сбой в середине вебинара01:57:40
В общем жду всех на смарт гриде темы01:57:43
интересна Нет я неза ни в ком образом я01:57:46
версталь и01:57:48
программист дизайне мне не надо быть это01:57:52
будет Ну в общем Кто видел как я рисую01:57:55
знает что будет если я стану01:57:57
веб-дизайне01:58:00
Вот да я программирую на PHP на жава01:58:04
скрипте в принципе могу нае писать наша01:58:07
балуюсь но основные коне PHP JavaScript01:58:09
Да основное - это а так наша бывало01:58:12
что-то программировал следующий01:58:13
бесплатный вебинар знаю так яб вотча на01:58:18
Т вопрос прок это активно развиваю01:58:22
поддерживаю Вот кстати кстати о что01:58:25
хотел сказать у нас есть фишка котора на01:58:27
лендинге не написано вот если кто-то01:58:29
боится что не сможет уроки посещать там01:58:30
или с первого раза не поймёт вот опять01:58:32
же не дадут соврать те кто были на01:58:34
предыдущих потоках01:58:37
Значит все последующие потоки Смарт01:58:39
грида Вы тоже сможете посещать кто01:58:41
запишется на курс То есть если с первого01:58:43
ра не поте прид на вто тре чет01:58:48
приня ходит вот там единственная01:58:52
оговорка нельзя делать нельзя присылать01:58:54
заново домашние задания потому что ну01:58:55
просто времени не хватит разобрать но01:58:58
последующие потоки со всеми обновлениями01:59:00
вы сможете смотреть никаких проблем вот01:59:03
так что приходите на курс всё там будет01:59:05
чётко01:59:06
ровно на сегодня тогда всё спасибо за01:59:08
внимание хорошего всем настроения01:59:11
Хорошего вечера ну и теперь вы знаете01:59:13
как развивалась адаптив и к чему стоит01:59:17
стремиться как верстать удобне все Всё01:59:20
Всем пока отличного настроения и до01:59:22
следующих01:59:23
[музыка]01:59:29
встречОписание:
Основы создания адаптивной вёрстки. Media-запросы и тег viewport. Размеры в % и max-width. Проблемы классической адаптивки. Эволюция вариантов адаптивной вёрстки. Идея классов из bootstrap. Свойство flex-basis во flexbox. Препроцессорная сетка smartgrid. Новый поток по smartgrid - https://smartgrid.dmitrylavrik.ru/
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Основы и эволюция адаптивной вёрстки"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Основы и эволюция адаптивной вёрстки" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Основы и эволюция адаптивной вёрстки"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Основы и эволюция адаптивной вёрстки" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Основы и эволюция адаптивной вёрстки"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Основы и эволюция адаптивной вёрстки"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.