Bootstrap Адаптивный дизайн

Введение

В этом руководстве объясняется, как применять адаптивный дизайн в макетах веб-страниц. В этом курсе вы узнаете об адаптивном веб-дизайне. С распространением мобильных устройств вопрос о том, как обеспечить пользователям хороший визуальный опыт при просмотре вашего сайта на мобильных устройствах, стал неизбежным. Адаптивный веб-дизайн — эффективный метод достижения этой цели.

Что такое адаптивный веб-дизайн

Адаптивный веб-дизайн — это метод, который позволяет пользователям получать хороший визуальный опыт при просмотре веб-сайта на устройствах различных размеров. Например, вы сначала просматриваете веб-сайт на компьютерном мониторе, а затем на смартфоне. Экран смартфона намного меньше компьютерного монитора, но вы не замечаете никакой разницы; пользовательский опыт обоих почти идентичен. Это показывает, что веб-сайт очень хорошо справляется с адаптивным дизайном.

Мы уже, в нашемприменилии приглашаем вас просмотреть при разных размерах экрана. Вы можете использоватьChromeилиFireFoxрасширение window resizer для настройки браузера.

Нажмите здесь, чтобы просмотреть。

Как работает адаптивный веб-дизайн

Чтобы применить адаптивный веб-дизайн, вам нужно создать CSS, который содержит стили, адаптированные к различным размерам устройств. Когда страница загружается на конкретном устройстве, страница использует различные шрифты и технологии веб-разработки, такие как медиазапросы. В этот момент сначала определяется размер viewport устройства, а затем загружаются стили, специфичные для устройства.

Более подробный взгляд на CSS адаптивного веб-дизайна

Мы изучим 'bootstrap-responsive.css', чтобы понять, как «адаптивный дизайн» достигает тонких различий. Перед этим вы должны добавить следующую строку кода в раздел head вашей веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Метатег viewport переопределяет viewport по умолчанию и помогает загружать стили, относящиеся к конкретному viewport.

widthАтрибут задаёт ширину экрана. Он содержит значение, например 320, что означает 320 пикселей, или значение 'device-width', которое указывает браузеру использовать исходное разрешение.

initial-scaleАтрибут задаёт начальный масштаб области просмотра. Если установить 1.0, будет отображаться исходная ширина устройства.

Конечно, необходимо добавить адаптивный CSS Bootstrap, как показано ниже:

<link href="assets/css/bootstrap-responsive.css.html" rel="stylesheet">

Теперь, если вы посмотрите на файл адаптивного CSS, вы обнаружите, что после некоторых общих объявлений (с 10-й по 22-ю строку) идут различные разделы'@media', которые начинаются с. Именно так пишутся стили, применяемые к различным устройствам.

Первый раздел начинается с '@media (max-width: 480px)' и задаёт стили для устройств с максимальной шириной 480 пикселей.

Второй раздел начинается с '@media (max-width: 767px)' и задаёт стили для устройств с максимальной шириной 767 пикселей.

Третий раздел начинается с '@media (min-width: 768px) and (max-width: 979px)' и задаёт стили для устройств с минимальной шириной 768 пикселей и максимальной шириной 979 пикселей.

Следующий раздел задаёт стили для устройств с максимальной шириной 979 пикселей. Поэтому он начинается с '@media (max-width: 979px)'.

Последние два раздела начинаются соответственно с '@media (min-width: 980px)' и '@media (min-width: 1200px)'. Первый задаёт стили для устройств с минимальной шириной 980 пикселей, а второй — для устройств с минимальной шириной 1200 пикселей.

Итак, основной эффект этой таблицы стилей состоит в том, что с помощью атрибутов 'min-width' и 'max-width' она определяет, какие стили использовать, исходя из максимальной и минимальной ширины устройства.

Объяснение

Чтобы сделать макет более адаптивным, Bootstrap делает три вещи:

1. Изменены ширины столбцов в сетке.

2. При необходимости он использует элементы наложения вместо плавающих элементов. Если вам всё ещё не ясно, что такое элементы наложения, следующая формулировка с w3.org может помочь:

Корневой элемент (html) формирует корень контекста наложения. Другие контексты наложения создаются любым позиционированным элементом (включая относительно позиционированные элементы с вычисленным значением 'z-index', отличным от 'auto'). Контексты наложения не обязательно привязаны к содержащему блоку.

3. Чтобы корректно отображать заголовки и текст, их размеры.

Разрабатывайте удобные для мобильных устройств макеты быстрее

Bootstrap имеет несколько практичных классов для разработки удобных для мобильных устройств макетов. Эти классы можно увидеть в 'responsive.less'.

.visible-phone, виден на телефонах с шириной 767px и меньше, скрыт на планшетах между 979px и 768px, скрыт на настольных компьютерах; это значение по умолчанию.

.visible-tablet, скрыт на телефонах с шириной 767px и меньше, виден на планшетах между 979px и 768px, скрыт на настольных компьютерах; это значение по умолчанию.

.visible-desktop, скрыт на телефонах с шириной 767px и меньше, скрыт на планшетах между 979px и 768px, виден на настольных компьютерах; это значение по умолчанию.

.hidden-phone, скрыт на телефонах с шириной 767px и меньше, виден на планшетах между 979px и 768px, виден на настольных компьютерах; это значение по умолчанию.

.hidden-tablet, виден на телефонах с шириной 767px и меньше, скрыт на планшетах между 979px и 768px, виден на настольных компьютерах; это значение по умолчанию.

.hidden-desktop, виден на телефонах с шириной 767px и меньше, виден на планшетах между 979px и 768px, скрыт на настольных компьютерах; это значение по умолчанию.

Нажмите здесь, чтобы скачать все HTML, CSS, JS и файлы изображений, используемые в этом руководстве.

Другие расширения