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

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 Автор вопроса

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

Написано более двух лет назад

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

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

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

Войти через центр авторизации

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

CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 2 часа назад
- 20 просмотров
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 4 часа назад
- 36 просмотров
0

ответов
HTML

+1 ещё

Простой
Как добавить разный фон в ::before для объектов с одинаковым стилем?
- 1 подписчик
- 4 часа назад
- 12 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 5 часов назад
- 22 просмотра
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 6 часов назад
- 49 просмотров
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 11 часов назад
- 50 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 11 часов назад
- 55 просмотров
1

ответ
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- вчера
- 58 просмотров
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- вчера
- 188 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 117 просмотров
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Необходимо сверстать приложение согласно макету Figma используя React

26 апр. 2024, в 22:22

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

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

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

8266 f12 требуется сделать ревью и оптимизировать работу

26 апр. 2024, в 20:42

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

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

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

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

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

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

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

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

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