Изменение css по разрешению экрана

Question

На моей веб-странице отображается текст разного размера в разных разрешениях компьютера. Мне нужно исправить это с помощью CSS.

У меня есть идея о размере экрана и о том, как это сделать, используя CSS. Я применил это на своей веб-странице, но не повлиял на другие настольные компьютеры и ноутбуки, имея разное разрешение экрана.

Может кто-нибудь помочь мне решить эту проблему, и если есть какой-либо способ изменить CSS на основе разрешения экрана.

Спасибо.

Answer 1

Вы должны использовать медиа-запросы, как:

@media screen and (min-width: 480px) { 
    body {font-size: 12px;} 
} 

вы можете использовать мин-ширина, не более ширины, а также смешивать эти

для получения полной информации проверить эту страницу: Media Queries CSS

Наиболее распространенные запросы:

Небольшие устройства (таблетки, 768px и выше): @media (мин-ширина: 768px)

Средние устройства (настольные компьютеры, 992px и выше): @media (мин-ширина: 992px)

большие устройства (большие настольные компьютеры, 1200px и выше): @media (мин-ширина: 1200px)

Answer 2

Вы должны использовать media Queries как this-

@media (min-width: 700px), handheld and (orientation: landscape) { ... } 

Go со ссылкой для более подробной информации -

Link

, а также не забудьте meta tag в head

<meta name="viewport" content="width=device-width, initial-scale=1">