Как правильно написать медиа запрос?

@useruser · Регистрация: 29.06.2015

Студворк — интернет-сервис помощи студентам

Только начинаю изучать эту тему.
Началось все с двух мониторов - большого и маленького.
При разработке на большом мониторе все выглядело хорошо. На маленьком мониторе/экране/разрешении все выглядело крупно и часть блоков не влезала.
Умные люди посоветовали rem.

Что я сделал сейчас.
Разработал весь дизайн на большом мониторе (высоком разрешении). Использовал rem.
На большом мониторе всё выглядит отлично.
Как я понял логика теперь такая - так как всё заязано на размере шрифта в body, достаточно написать медиа запрос, который в зависимости от размеров экрана изменит/задаст этот шрифт.
Ну а так как всё зависит от его размера, то автоматически всё поменяет свой размер.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html,body 
{
font-family: Arial;
font-size: 16px;
}
 
@media screen and (max-width: 768px) {
  body {
    font-size:10px;
  }
}
 
/* Кнопка  */
.link_button_1{
border: 1px solid #00AEFF;
background: #0E86CA;
color: #ffffff;
font-family: Arial;
font-size: .875rem; /* 14px */
padding: 0.4375rem 1.25rem;  /* 10px */
text-align: center;
text-decoration: none;
transition-property: background;
transition-duration: 100ms;
transition-timing-function: ease;
transition-delay: 0s; 
vertical-align: middle;
}

Возможно, я неверно написал медиа запрос. Т.к. как я не меняю размеры окна браузера - ничего не происходит.
Размер кнопки не изменяется.
Как правильно написать медиа запрос?

@AlexZaw · 09.01.2018, 10:08

В запросе нужно не у body размер шрифта менять, а у html, так как корневым элементом является он, а не body

@useruser · 09.01.2018, 10:24 **[ТС]**

Сообщение от AlexZaw

В запросе нужно не у body размер шрифта менять, а у html, так как корневым элементом является он, а не body

Спасибо, заработало.
Но почему рекомендуют писать

CSS
1
2
3
4
5
html,body 
{
font-family: Arial;
font-size: 16px;
}

Ведь body нам не нужен?
У меня в html всё завязано на стилях.
И простого текста, который будет без стиля и примет атрибут body font-size: 16px; не будет.

@serega_bazhenov · 09.01.2018, 14:47

Насколько я знаю, использовать rem и em для значений padding и margin не нужно. Там можно использовать привычные px и %, так как всё равно придётся перестраивать блоки и их размеры.
А em и rem используется для font-size и line-height.

@AlexZaw · 09.01.2018, 19:04

Вот как раз наоборот, используем rem для отступов, а пиксели для размеров шрифта, тогда если в запросе изменить размер шрифта у html изменятся и отступы, а шрифт останется таким каким задан для body или для конкретных элементов

@serega_bazhenov · 09.01.2018, 21:41

AlexZaw, даже и не знаешь кого слушать в таком случае. Просто, только вчера смотрел видео по этой теме и там как раз говорили, так как я написал выше (используем px для отступов, и rem для шрифтов и высоты строки).

@AlexZaw · 09.01.2018, 22:05

serega_bazhenov, Нужно смотреть по ситуации, в принципе оба варианта имеют право на жизнь, хотя как по мне адаптив удобнее делать без привязки к какой либо величине, тогда при запросах можно более гибко вносить изменения, у какого то элемента изменить отступы/шрифт, а у какого то оставить, в случае же использования rem, при изменении шрифта в html изменится поведение всех элементов которые завязаны на rem, что не всегда может быть нужно.

@Denno · 10.01.2018, 01:42

Сообщение от serega_bazhenov

даже и не знаешь кого слушать в таком случае

Тоже придерживаюсь этой концепции. Просматриваю иногда буржуйские сайты, так у них в основном rem - это для шрифтов, а px для полей, отступов и рамок.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	09.01.2018, 10:08
	В запросе нужно не у body размер шрифта менять, а у html, так как корневым элементом является он, а не body 1

@serega_bazhenov 1 / 1 / 0 Регистрация: 09.01.2018 Сообщений: 9
	09.01.2018, 14:47
	Насколько я знаю, использовать rem и em для значений padding и margin не нужно. Там можно использовать привычные px и %, так как всё равно придётся перестраивать блоки и их размеры. А em и rem используется для font-size и line-height. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	09.01.2018, 19:04
	Вот как раз наоборот, используем rem для отступов, а пиксели для размеров шрифта, тогда если в запросе изменить размер шрифта у html изменятся и отступы, а шрифт останется таким каким задан для body или для конкретных элементов 0

@serega_bazhenov 1 / 1 / 0 Регистрация: 09.01.2018 Сообщений: 9
	09.01.2018, 21:41
	AlexZaw, даже и не знаешь кого слушать в таком случае. Просто, только вчера смотрел видео по этой теме и там как раз говорили, так как я написал выше (используем px для отступов, и rem для шрифтов и высоты строки). 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	09.01.2018, 22:05
	serega_bazhenov, Нужно смотреть по ситуации, в принципе оба варианта имеют право на жизнь, хотя как по мне адаптив удобнее делать без привязки к какой либо величине, тогда при запросах можно более гибко вносить изменения, у какого то элемента изменить отступы/шрифт, а у какого то оставить, в случае же использования rem, при изменении шрифта в html изменится поведение всех элементов которые завязаны на rem, что не всегда может быть нужно. 0