Вопрос как сделать адаптивность на сайт?

Question

Артур @TellS

HTML
CSS

Вопрос как сделать адаптивность на сайт?

Вот код :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ФОРМА ЗАЯВКИ</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/media-quiries.css">
</head>
<body>

	<div class="content">
		<h1>Оставить заявку!</h1>
		<input type="email" name="email"><br>
		<a id="fig" href="#">Отправить</a>
	</div>

</body>
</html>

Как мне сделать что на телефонах текст и все оставльно отображалось правильно ? Крч как его сделать адаптивным

Вопрос задан более трёх лет назад
116 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

Артур @TellS Автор вопроса

сделал как вы сказали

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ФОРМА ЗАЯВКИ</title>
	<meta name="viewport" name="width=device-width" />
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/media-quiries.css">
</head>
<body>

	<div class="content">
		<h1>Оставить заявку!</h1>
		<input type="email" name="email"><br>
		<a id="fig" href="#">Отправить</a>
	</div>

</body>
</html>

.content {
	margin: 0 auto;
	width: 300px;
}

@media screen and(max-width:  480px) {
	h1 {
		font-size: 24px;
	}
}

Но не изменяется
Вот скрин : https://pastenow.ru/fbd17545c4439cf5b104e3e2e7fdf621

Написано более трёх лет назад

Максим Бойко @Avenant

Артур, Я в ответе опечатался, вместо второго name в meta-теге нужно было написать content, попробуйте.
Так же в медиа запросе между and и (max-width: 480px) должен стоять пробел

Написано более трёх лет назад

Артур @TellS Автор вопроса

Максим Бойко, Так ?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ФОРМА ЗАЯВКИ</title>
	<meta name="viewport" content="device-width" />
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/media-quiries.css">
</head>
<body>

	<div class="content">
		<h1>Оставить заявку!</h1>
		<input type="email" name="email"><br>
		<a id="fig" href="#">Отправить</a>
	</div>

</body>
</html>

body {
	-webkit-tap-highlight-color: transparent;

}

.content {
	margin: 0 auto;
	width: 300px;
}

input {
	background-color: white;
	border: 0.2px solid black;
	font-size: 20px;
	padding: 10px;
	border-radius: 30px;
	outline: none;
}

input:hover {
	background-color: white;
	box-shadow: 0 0 15px green;
	border: 0 solid black;
}

@media screen and (max-width:  640px) {
	.content {
		width: 240px;
	}
	h1 {
		font-size: 30px;
	}
}

Если да , от не работает .
Скрин : https://pastenow.ru/61cff268c5d45c7b99d48f4c740d0a4b

Написано более трёх лет назад

Артур @TellS Автор вопроса

Максим Бойко, а все работает , спасибо

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 8 часов назад
- 62 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 19 часов назад
- 92 просмотра
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 75 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 105 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 94 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 96 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

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

23 дек. 2024, в 09:55

10000 руб./за проект

Верстка сайта в Tilda

23 дек. 2024, в 09:41

5000 руб./за проект

UI мобильной игры

23 дек. 2024, в 09:39

1000000 руб./за проект

Answer 1 · 2021-08-10 18:21:06

Как сказал человек выше - брейкпоинты.
Ну и не забыть указать в meta-тегах.

<meta name="viewport" content="width=device-width" />

@media screen and (max-width: /*Это будет означать ширину экрана на котором применятся стили*/) {
    .content {
        /*Тут стили которые применятся при указаной ширине экрана*/
    }
}

Вопрос как сделать адаптивность на сайт?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт