Роль ViewPort в модели визуального форматирования

Опубликовано: 3 Января, 2023

В этой статье мы увидим роль области просмотра в модели визуального форматирования, а также узнаем ее назначение и базовую реализацию. Область просмотра браузера — это область веб-страницы, в которой контент виден пользователю. Область просмотра не имеет одинакового размера, она зависит от размера экрана устройств, на которых отображается веб-сайт.

Размер окна просмотра зависит от ориентации вашего экрана, особенно в непрерывном медиа . Так что это зависит от размера экрана устройства. При загрузке страницы браузер проверяет размер области просмотра, и модель визуального форматирования упорядочивает каждый элемент в соответствии с ним. Если размер области просмотра изменится, элементы будут располагаться соответствующим образом. В непрерывных медиа область просмотра — это область, в которой вы просматриваете окно браузера. Браузер может изменить макет страницы, если изменится размер области просмотра страницы. Окно просмотра можно определить с помощью следующего синтаксиса в файле HTML:

<meta name=”viewport” content= “width=device-width, initial-scale=1.0”>

Подробное описание см. в метатеге HTML Viewport для статьи об адаптивном веб-дизайне.

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

Пример. В приведенном ниже примере показана страница в полной ориентации экрана рабочего стола, где полоса прокрутки не требуется, поэтому модель визуального форматирования не вставляет ее. Когда страница меняет ориентацию или уменьшает размер экрана, размер изображения изменяется в соответствии с размером ширины устройства и, соответственно, добавляется полоса прокрутки для отображения содержимого веб-страницы.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
          rel="stylesheet" />
    <style>
        body {
            font-family: "Open Sans", sans-serif;
            margin: 0;
            background-color: rgb(0, 0, 0);
        }
  
        a {
            text-decoration: none;
        }
  
        #main-header {
            height: 5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgb(255, 254, 253);
            padding: 0 5%;
        }
  
        #logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: rgb(40, 149, 23);
            text-transform: uppercase;
        }
  
        main h1 {
            text-align: center;
            color: rgb(40, 149, 23);
            font-size: 3rem;
        }
  
        #latest-products {
            width: 80%;
            margin: 2rem auto;
        }
  
        #latest-products ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
  
        .item {
            background-color: rgb(228, 206, 182);
            border-radius: 6px;
            overflow: hidden;
        }
  
        .item img {
            height: 22rem;
            width: 100%;
            object-fit: cover;
        }
  
        .item-content {
            padding: 1rem;
            text-align: center;
        }
  
        .item h2 {
            margin: 0 0 1rem 0;
        }
  
        @media (max-width: 48rem) {
            #latest-products ul {
                grid-template-columns: 100%;
            }
  
            main h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
  
<body>
    <header id="main-header">
        <a href="index.html" id="logo">
            GeeksforGeeks 
        </a>
    </header>
  
    <main>
        <h1>GeeksforGeeks Article</h1>
        <section id="latest-products">
            <ul>
                <li class="item">
                    <article>
                        <img
                            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220711133304/geeksforgeeks.jpg" />
                        <div class="item-content">
                            <h2>GeeksforGeeks</h2>
                        </div>
                    </article>
                </li>
                <li class="item">
                    <article>
                        <img
                            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220711133304/geeksforgeeks.jpg" />
                        <div class="item-content">
                            <h2>GeeksforGeeks</h2>
                        </div>
                    </article>
                </li>
            </ul>
        </section>
    </main>
</body>
</html>

Вывод: на изображении ниже вы можете видеть, что полоса прокрутки включена браузером в соответствии с моделью визуального форматирования, поскольку размер документа больше, чем область просмотра.

HTML CSS

Роль ViewPort в модели визуального форматирования

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ