как имитировать большой экран (5600 * 1050) в моем локальном ноутбуке (1280 * 1024) и использовать медиа-запрос - PullRequest
0 голосов
/ 16 января 2019

Я хочу имитировать большой экран (5600 * 1050) на своем локальном ноутбуке (1280 * 1024) и использовать медиазапрос.

Я попытался установить мета-ширину области просмотра = 5600, но, похоже, это не сработало. Я надеюсь, что div-оболочка должна быть синего цвета, потому что ширина области просмотра уже больше, чем 5600px.

мой тестовый код:

body {
        margin: 0;
        overflow: auto;
      }

      .wrapper {
        width: 100px;
        /* float: left; */
      }

      @media (min-width: 0px) and (max-width: 5600px) {
        .wrapper {
          background-color: red;
        }
      }

      @media (min-width: 5600px) {
        .wrapper {
          background-color: blue;
        }
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=5600, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">aaa</div>
    <div class="wrapper" style="position: fixed; right: 0px; top: 0px;">ddd</div>
  </body>
</html>

добавлена ​​фотография enter image description here enter image description here

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Если вы используете Google Chrome, вы можете использовать для этого инструменты разработчика.

Шаг 1. Нажмите F12
Шаг 2. Нажмите маленький значок мобильного устройства в левом верхнем углу окна инструментов разработчика.
Шаг 3. Выберите «Отзывчивый» в раскрывающемся списке выбора устройств в верхней части окна браузера.
Шаг 4. Установите масштаб примерно на 50% или ниже, чтобы новое разрешение соответствовало вашему экрану
Шаг 5. Нажмите и перетащите края адаптивного окна, пока не достигнете желаемого разрешения, или просто введите разрешение в поля ввода в верхней части окна.
https://i.snag.gy/DeJv5j.jpg

См. Эту ссылку для получения дополнительной информации: https://developers.google.com/web/tools/chrome-devtools/device-mode/

0 голосов
/ 16 января 2019

Так что вы можете легко это сделать с помощью инструментов разработки:

enter image description here Работа для тебя?

...