[MUSIC] В
наши дни в мире веб-разработки мы часто слышим, как люди
упоминают термины отзывчивый дизайн и мобильный первый подход.
Давайте попробуем понять, что подразумевается под этими терминами и
как они влияют на то, как вы создаете свои веб-сайты и веб-приложения.
Ваш очевидный вопрос будет заключаться в том, почему рассматривать адаптивный дизайн?
Чтобы помочь нам понять это, давайте рассмотрим, как люди обращаются к веб-сайтам в эти дни?
Традиционно, когда веб-сайты были впервые разработаны, вы могли бы в значительной степени предположить
, что люди будут просматривать ваши веб-сайты с компьютера.
В эти дни ваши сайты можно было посещать со смартфона,
планшета или компьютера с разными размерами экрана и разрешением экрана.
Как мы можем последовательно отображать наши веб-сайты на устройствах разного размера экрана?
Один размер соответствует всем подходам, что традиционные
дизайнеры веб-сайтов взяли больше не фиксированный счет.
Нам нужен лучший подход, подход, который автоматически
адаптирует ваш сайт к размеру экрана, на котором он просматривается.
Здесь мы должны принять подход, чтобы адаптироваться к порту представления пользователя.
Это должно быть встроено в дизайн и разработку вашего сайта
, чтобы он автоматически адаптировался к просмотру устройства пользователя.
Чтобы помочь вам лучше оценить необходимость
адресации устройств разного размера экрана.
Я пользуюсь помощью опций разработчика, которые могут предоставить браузер Safari
, который позволяет мне просматривать веб-сайт с экранами разных размеров.
Так что, надеюсь, убедит вас в том, почему мы сделали адаптивный веб-дизайн.
Итак, здесь вы видите, что сайт Coursera
отображается на экранах 1920 по 1080.
Это будет типичный большой рабочий стол или экран ноутбука высокого разрешения.
Тогда давайте рассмотрим тот же сайт просматривается с помощью меньшего экрана, такого.
Таким образом, вы автоматически видите, что макет экрана немного
подстраивается под размер видового экрана вашего устройства,
то же самое на 800 на 600.
Так что давайте спустимся в размерах экрана, это IPad закрыть вид того же сайта.
Это размер iPad Air 2, это iPad Mini 4 размер,
обратите внимание на переход от IPad Mini 4
размера к iPhone 6S Plus в портретном режиме.
Теперь вы заметите, что навигационный бот теперь свернул в кнопку,
которая при нажатии отобразит параметры из вашего навигационного баша.
И давайте посмотрим на то же самое в нашем iPhone 6S
в ландшафтном режиме, обратите внимание, как экран принимает себя.
Аналогично для iPhone 6S в ландшафтном режиме и
перейти к iPhone SE, и вы видите, как веб-сайт
изменил способ его визуализации.
Надеюсь, этот пример продемонстрировал вам, как и
почему нам нужен отзывчивый веб-дизайн.
Вторая связанная концепция, которую вы услышите, является мобильным первым.
Мобильный первый подход вместо этого ориентируется на проектирование веб-сайта
для мобильного устройства.
Так что подумайте о том, как вы будете удовлетворять ограничения экрана вашего мобильного устройства.
А затем, по мере увеличения размера экрана, вы автоматически
запускаете приложение на свой сайт для большего и большего размера экрана.
Возможно, вы готовы все больше и больше контента.
Так что, чтобы воспользоваться увеличением экрана недвижимости.
Таким образом, один и тот же сайт при просмотре на мобильном устройстве может иметь только
части информации, раскрываемой пользователю.
Но тогда, когда он отображается на полном рабочем столе
опера, он может показать гораздо более подробную версию веб-сайта.
Теперь это должно быть автоматически адаптировано на основе информации
, которую вы получаете с устройства, с которого просматривается ваш сайт.
Так как мы получим эту информацию?
К счастью, адаптивный веб-дизайн поддерживается
многими современными интерфейсными фреймворками веб-интерфейса, включая Bootstrap.
Поэтому, когда мы смотрим на определение Bootstrap на его веб-странице, он говорит, что
реагирующий мобильный первый подход.
Да, как нам делать адаптивный веб-дизайн?
Таким образом, есть несколько концепций, которые встроены в ваши
фреймворки веб-интерфейса, которые приходят на помощь, когда вам нужно сделать адаптивный веб-дизайн.
В первую очередь это то, что называется Grid система?
Мы рассмотрим систему Grid Bootstrap более подробно в следующей
лекции.
Таким образом, мы поймем, как мы можем использовать это, чтобы иметь возможность делать
адаптивный веб-дизайн.
Второй аспект - это жидкие изображения, так что ваши изображения, которые вы включаете в ваш
сайт, автоматически адаптируются к размеру экрана.
И третья часть - это то, что называется медиа-запросами CSS из вашего кода CSS.
Вы можете запросить размер носителя, а затем соответствующим образом
настроить классы CSS в соответствии с размером экрана устройства.
Как теперь работают медиа-запросы?
Посмотрим на это дальше.
Медиа-запросы поддерживаются в CSS, как это.
Таким образом, технология позволяет сделать медиа-запрос, чтобы указать минимальную ширину
экрана, под которым будет активен этот конкретный набор классов CSS.
Таким образом, это будет указано в вашем файле CSS как @media, а
затем в скобке вы указываете, например, min-width.
Существует гораздо больше вариантов медиа-запросов, чем то, что я показываю здесь.
Это всего лишь один пример того, как вы построили медиа-запрос в вашем CSS коде.
Взглянув на код CSS Bootstrap,
давайте зайдем и посмотрим, как медиа-запросы используются Bootstrap.
Итак, здесь вы видите пример медиа-запроса, где он говорит, @media и
min-width 576 пикселей.
И тогда он указывает, что те конкретные контейнеры вызова класса CSS,
о которых мы узнаем больше в следующей лекции,
а также в упражнении, которое следует.
Мы увидим, что ширина контейнера устанавливается на основе ширины экрана.
Аналогично, для экрана с более высокой шириной ширина контейнера автоматически настраивается.
Таким образом, это то, что позволяет вашей веб-структуре пользовательского интерфейса
поддерживать адаптивный веб-дизайн.
Таким образом, делая медиа-запросы, ваша веб-инфраструктура пользовательского интерфейса может
установить, на каком устройстве вы рендеринга свой сайт.
И соответственно настройте классы CSS, чтобы
соответствовать этому размеру экрана конкретных устройств.
Итак, очевидно, следующий вопрос, который придет вам в голову, заключается в том, как мы
это делаем на практике?
К счастью, если вы начнете с хорошо спроектированной
фреймворком веб-интерфейса интерфейса, такой как Bootstrap, все станет очень простым.
Мы узнаем больше об этом в следующей лекции и упражнении, которое следует за этим.
[ МУЗЫКА]