В этой статье показаны шаги по созданию адаптивного дизайна веб-сайта в HTML и CSS с использованием:
Как создать адаптивный дизайн сайта с помощью HTML и CSS?
Создание адаптивного дизайна веб-сайта с помощью HTML и CSS включает в себя создание макета, который адаптируется к разным размерам и разрешениям экрана. Вот шаги, которые вы можете выполнить, чтобы создать адаптивный дизайн веб-сайта:
Шаг 1: Метатег видового экрана
“ окно просмотра Метатег ” играет жизненно важную роль в создании адаптивного веб-дизайна. Он вставляется внутрь « <голова> ” HTML-файла, содержащего следующие атрибуты:
< мета имя '=' 'окно просмотра' содержание '=' 'ширина = ширина устройства, начальный масштаб = 1' / >
Приведенный выше метатег имеет два атрибута:
- “ имя Атрибут сообщает название функциональности, для которой этот тег создан/используется. Например, установка « окно просмотра ” к “ имя ” для работы с областью просмотра различных устройств.
- “ содержание ” определяет предыдущее значение атрибута. Он устанавливает ширину каждого устройства и масштабирует документ/веб-страницу до 100%.
Шаг 2: Адаптивные изображения
Поскольку размер изображения отличается друг от друга, поэтому трудно установить одинаковые « высота ' или ' ширина ” для каждого изображения. Когда размер изображения фиксирован, пользователи не изменяют размер изображения веб-страницы вместе с экраном. Однако пользователи могут установить адаптивное изображение с помощью следующего кода:
изображение {
Макс- ширина : 100 %;
}
“ Максимальная ширина Свойство CSS ограничивает отображение изображения внутри выделенного ему пространства. При установке значения в «%» размер изображения изменяется вместе с изменением размера его родительского элемента. Это создает адаптивный эффект для изображения.
Шаг 3: Макет Flexbox
Макет Flexbox настоятельно рекомендуется для создания адаптивного дизайна веб-сайта. Это позволяет элементам HTML отображаться в определенной позиции и изменять размер доступного пространства для каждого дочернего элемента в соответствии с размером, доступным родительскому элементу div. Макет Flexbox содержит несколько свойств, которые предоставляют большую свободу разработчику, как в приведенном ниже коде:
< стиль >
.родитель {
дисплей: гибкий;
}
.ребенок {
гибкий: 1 ;
текст- выровнять : центр;
}
< / стиль >
< тело >
< див сорт '=' 'родитель' >
< див сорт '=' 'ребенок' стиль '=' 'граница: 3 пикселя, сплошной сине-фиолетовый цвет;' >Добро пожаловать< / див >
< див сорт '=' 'ребенок' стиль '=' 'граница: 3 пикселя сплошная темно-зеленая;' >к< / див >
< див сорт '=' 'ребенок' стиль '=' 'граница: 3 пикселя сплошного красного цвета' >Линуксинт< / див >
< / див >
< / тело >
В приведенном выше фрагменте кода:
- Сначала создайте родительский элемент div с идентификатором « родитель ' внутри ' <тело> ' ярлык.
- Затем создайте несколько дочерних элементов div и назначьте им класс « ребенок ».
- Затем выберите « родитель » и укажите значение « сгибаться 'для CSS' отображать ' свойство.
- После этого укажите значение « 1 ” к “ сгибаться «собственность каждому» ребенок », который заставляет дочерний элемент отображаться как гибкий.
После выполнения приведенного выше кода веб-страница выглядит так:
Приведенный выше вывод показывает, что дочерний элемент получает равную ширину при изменении размера браузера.
Шаг 4: Макет сетки
Макет сетки создает сетку и назначает элементы HTML внутри части сетки. Элементы сетки меняются в зависимости от размера экрана веб-страницы. Он создает адаптивный дизайн, поскольку размер HTML-элемента изменяется в зависимости от экрана устройства:
< стиль >.контейнер {
отображение: сетка;
столбцы сетки-шаблона: 1fr 1fr 1fr;
}
< / стиль >
< тело >
< див сорт '=' 'компонент' >
< див стиль '=' 'граница: 3 пикселя сплошной зеленый лес'; >Линуксинт< / див >
< див стиль '=' 'граница: 3 пикселя сплошная темно-зеленая;' >Линуксинт< / див >
< див стиль '=' 'граница: 3 пикселя сплошного красного цвета' >Линуксинт< / див >
< / див >
< / тело >
В приведенном выше коде:
- Сначала создайте родительский div и назначьте ему класс « компонент ' внутри ' <тело> ' ярлык. После этого создайте в нем три дочерних элемента div.
- Затем в файле CSS назначьте « сетка ” к “ отображать ” имущество для “ контейнер ” разд.
- После этого создайте на веб-странице три одинаковых по размеру части, используя « сетка-шаблон-столбец ” и установите его равным “ 1фр 1фр 1фр », где фр означает « доля ».
После компиляции приведенного выше кода вывод выглядит следующим образом:
Вывод показывает, что элементы div изменяют свой размер в соответствии с размером экрана с равными пропорциями.
Шаг 5: Медиа-запросы
Использование медиа-запросов для создания адаптивного дизайна — это своего рода старая школа, но, тем не менее, большинство веб-сайтов используют медиа-запросы. Медиа-запросы можно добавить непосредственно в файл CSS после добавления стиля по умолчанию для выбранного элемента HTML. Медиа-запрос делает код немного длиннее и запутаннее. Потому что разработчику нужно вставлять код для каждого размера экрана отдельно.
Например, см. приведенный ниже фрагмент кода:
@ СМИ экран и ( мин- ширина : 640 пикселей ) {.компонент {
фон- цвет : зеленый лес;
}
}
В приведенном выше фрагменте кода:
- Сначала задайте медиа-запрос, который применяет свойства CSS к выбранному классу элементов». компонент ', когда ширина экрана становится больше, чем ' 640 пикселей ».
- Затем выберите «класс компонента» и установите значение « зеленый лес ' для ' фоновый цвет ' свойство.
.компонент {
фон- цвет : доджерблю;
}
}
Затем для приведенного выше фрагмента кода:
- Настройте медиа-запрос на применение стилей, когда размер ширины меньше « 1000 пикселей ».
- Теперь выберите « компонент » и укажите значение « доджерблю ' для ' фоновый цвет ' свойство:
После выполнения приведенных выше фрагментов кода вывод выглядит следующим образом:
Вывод показывает, что медиа-запрос меняет фон в зависимости от размера экрана. Размер шрифта, ширина, высота и другие свойства CSS также могут применяться по тому же шаблону.
Возможные размеры экрана точек останова, которые следует учитывать при использовании медиа-запросов:
- Для ' маленький ' размер экрана, установите ширину меньше, чем ' 640 пикселей ».
- Для ' середина ' размер экрана области просмотра, ширина варьируется от ' 641px ' и ' 1007 пикселей ».
- Для ' большой 'размер экрана, установите ширину на ' 1008 пикселей ” или выше.
Заключение
Чтобы создать адаптивный дизайн веб-сайта, разработчикам необходимо добавить « область просмотра <мета> тег ' <голова> раздел тегов. Далее используйте « Флексбокс ' и ' Сетка ' Макет. Эти модули макета помогают создать адаптивный дизайн. В итоге « медиазапросы », помогите разработчику стилизовать разные версии одного и того же веб-сайта для разных размеров экрана. В этой статье продемонстрированы шаги, с помощью которых можно создать адаптивный дизайн веб-сайта.