Определение ширины экрана с помощью CSS Media Queries

Question

Я предполагаю, что поскольку вы можете сделать это с помощью Media Queries:

@media (min-width:500px) { … }

Что в тот или иной момент таблица стилей CSS должна знать, какая ширина экрана, без Javascript.

Так ли это?

Answer 1

Вы можете использовать device-width, который будет проверять ширину экрана в пикселях. Это, однако, не совсем рекомендуется. Вместо этого используйте max-width и min-width (для области просмотра).

---

Если вы пытаетесь ПОЛУЧИТЬ ширину экрана и использовать ее (что-то вроде content: (device-width);, то это невозможно. Используйте JavaScript.

Справочное руководство

Answer 2

Когда размер окна просмотра клиентского браузера изменится, браузер перекрасит видимую область.В этот момент браузер будет проверять, существуют ли стили медиазапроса, которые имеют отношение к новому окну просмотра.

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

Answer 3

В html ->

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

ИЛИ

В CSS ->

@viewport {
  width: device-width;
  }

Надеюсь, это помогло.

Answer 4

Ну ...

@media(width:1024px){
  p#id:after{
    content:"1024px";
  }
}

Если ширина области просмотра составляет 1024 пикселя, то после обозначенного элемента

отображается текст «1024px».Вы можете (гипотетически) поместить несколько тысяч таких блоков CSS для отображения ширины области просмотра при любом разумном значении его ширины.(Обратите внимание, что текст не может быть выделен в некоторых браузерах.)

Чем больше вы знаете ... (пожалуйста, не делайте этого на самом деле)