Помогите составить код адаптации к устройствам для HTML и CSS вёрстки

Question

Помогите составить код адаптации к устройствам для HTML и CSS вёрстки

Keedes chanel LIVE 2 Мастер (1418), открыт 1 день назад

Я хочу сделать код, и не получается: не работает.
По каким причинам - я не знаю.Вообщем что нужно полностью и целиком написать в HTML и CSS файлах, чтобы это работало?

Answer 1

Данил Николаев Ученик (219) 1 день назад

Через @media в css

⚠Оракул (50000) 1 день назад

 а если
видеоплеера
или 
аудиоплеера

то надо
прописывать
ихнее название

типа
video
media

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Default styles for larger devices */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.box {
background-color: #007BFF;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}

/* Responsive design for tablets */
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Responsive design for mobile devices */
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design Example</h1>
<div class="grid">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
</div>
</body>
</html>

Этот код создает адаптивную верстку с использованием CSS. Он включает:

1. **Мета-тег viewport** в HTML для настройки масштабирования.
2. **Сетки (grid layout)**, которая изменяет количество колонок в зависимости от ширины экрана:
- На устройствах шириной до 768px — 2 колонки.
- На устройствах шириной до 480px — 1 колонка.

Сохраните HTML-код в отдельном файле и убедитесь, что ваш браузер поддерживает CSS Grid Layout. Убедитесь, что у вас отключен кэш, чтобы изменения обновлялись.

Answer 3

Создайте файл HTML (index.html):

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Простой сайт</title>
<link rel="stylesheet" href="style.css"> 
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<section>
<p>Этот сайт использует HTML и CSS для стилизации.</p>
</section>
<footer>
<p>© 2024 Мой сайт</p>
</footer>
</body>
</html>

Создайте файл CSS (style.css):

/* Стили для всего сайта */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}

h1 {
margin: 0;
}

section {
padding: 20px;
text-align: center;
}

footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}

/* Адаптивность */

/* Медиазапрос для устройств с шириной экрана 768px или меньше (например, планшеты и мобильные телефоны) */
@media screen and (max-width: 768px) {
header {
padding: 15px;
}

h1 {
font-size: 24px;
}

section {
padding: 15px;
}

footer {
padding: 8px;
}
}

/* Медиазапрос для устройств с шириной экрана 480px или меньше (мобильные телефоны) */
@media screen and (max-width: 480px) {
body {
font-size: 14px;
}

header {
padding: 10px;
}

h1 {
font-size: 20px;
}

section {
padding: 10px;
}

footer {
padding: 5px;
}
}