Еще одним фактором, который заставляет сосредоточиться на адаптивном дизайне, ориентированном на мобильные устройства, является то, что большинство людей выходят в Интернет через свои мобильные устройства, а это 60%. В то время как только 20% людей используют Интернет на настольных компьютерах.
В этой статье будут описаны инструкции по созданию адаптивного дизайна, ориентированного на мобильные устройства.
Как настроить адаптивный дизайн, ориентированный на мобильные устройства?
Адаптивный дизайн, будь то мобильный или для больших экранов, можно создать, следуя методам, приведенным ниже:
- Создайте адаптивный дизайн, ориентированный на мобильные устройства.
- Используйте медиа-запрос для разработки/создания адаптивного дизайна для больших экранов.
Метод 1. Создайте адаптивный дизайн, ориентированный на мобильные устройства
Во-первых, начните с создания подхода к дизайну, ориентированного на мобильные устройства. Для этого следуйте пошаговым инструкциям, приведенным ниже.
Шаг 1. Создайте структуру HTML
Сначала создайте структуру HTML и добавьте « Бутстрап ' в <голова> раздел. Чтобы узнать о добавлении таблицы стилей в раздел HTML, нажмите на эту ссылку. связь . После создания базовой структуры веб-сайта, включая: <нет> , <заголовок> и <нижний колонтитул> как указано ниже:
< тело ><заголовок>
<нет>
< ул >
< что >< а href '=' '#' > Дом < / а >< / что >
< что >< а href '=' '#' > О нас < / а >< / что >
< что >< а href '=' '#' > Наши услуги < / а >< / что >
< что >< а href '=' '#' > Связаться с нами < / а >< / что >
< / ул >
< / нет>
< / заголовок>
<основной>
<раздел>
< ч1 > Добро пожаловать в Linux Hint < / ч1 >
< п > Сайт обучающих программ. < / п >
< / раздел>
< / главная>
<нижний колонтитул>
< п > Linux Подсказка по авторским правам < / п >
< / нижний колонтитул>
< / тело >
Шаг 2. Примените CSS
В разделе body установите « семейство шрифтов ' к ' без засечек ». Также установите отступы, поля и цвет фона. После этого примените CSS к верхнему, нижнему колонтитулу и навигации:
тело {семейство шрифтов : без засечек ;
допуск : 0 ;
прокладка : 0 ;
фоновый цвет : #808080 ;
}
заголовок {
фоновый цвет : фиолетовый ;
цвет : белый ;
прокладка : 8 пикселей ;
}
навигация по ул. {
тип стиля списка : никто ;
прокладка : 0 ;
допуск : 0 ;
}
их корабль {
допуск : 4 пикселя 0 ;
}
нав уль ли а {
цвет : белый ;
текст-оформление : никто ;
}
основной {
прокладка : 18 пикселей ;
}
нижний колонтитул {
фоновый цвет : розовый ;
цвет : белый ;
выравнивание текста : центр ;
прокладка : 8 пикселей ;
}
Как можно заметить, приведенный ниже вывод подтвердил, что дизайн ориентирован на мобильные устройства:
Метод 2. Используйте медиа-запросы для создания адаптивного дизайна для больших экранов
Приведенный выше дизайн также можно создать для больших экранов, таких как планшеты и настольные компьютеры. Для этой цели пользователям необходимо включить медиа-запрос в CSS. Ширина для планшетов составляет « 786 пикселей », а для настольных компьютеров – « 1024 пикселей ».
Чтобы применить медиа-запросы, сначала включите « @СМИ ” в файле CSS. После этого укажите свойство «min-width» как « 768 пикселей ». Это означает, что всякий раз, когда достигается минимальный размер экрана «768 пикселей» или выше, будет применяться следующий CSS:
@СМИ ( минимальная ширина : 768 пикселей ) {тело {
размер шрифта : 14 пикселей ;
}
заголовок {
прокладка : 18 пикселей ;
}
навигация по ул. {
отображать : гибкий ;
}
их корабль {
допуск : 0 8 пикселей ;
}
основной {
отображать : гибкий ;
оправдание-содержание : пространство-между ;
выравнивание элементов : центр ;
}
нижний колонтитул {
прокладка : 18 пикселей ;
}
}
Приведенный ниже вывод продемонстрировал, что дизайн также отзывчив на больших экранах:
Заключение
Чтобы настроить адаптивный дизайн для мобильных устройств, сначала создайте HTML-структуру и добавьте область просмотра. После этого свяжите файл CSS в теге head. Затем примените CSS на основе адаптивного дизайна, ориентированного на мобильные устройства. Кроме того, пользователи могут добавить медиа-запрос CSS для настройки на мобильном устройстве. В этой статье продемонстрирована подробная процедура настройки адаптивного дизайна, ориентированного на мобильные устройства.