Как называется эта модель? Адаптивный дизайн?

Я много читал об адаптивном дизайне. Все источники, которые я мог найти в какой-то момент, упоминают подход на стороне сервера или, по крайней мере, говорят о том, как он ускоряет загрузку, потому что вы обслуживаете только то, что нужно клиенту. В отличие от адаптивного дизайна, вы предоставляете один контент, который адаптируется на стороне клиента, например, с помощью медиа-запросов. Жидкие сетки и макеты приходят мне на ум.

Тем не менее, я подумал об очень простом, наивном и (из моего понимания) подходе с глупыми головами, для которого просто не мог найти образец. Наверное, потому что это так скучно.

Моя идея заключалась в том, чтобы создать отдельный вид для каждого устройства, как вы обычно делаете с адаптивным дизайном, но поместить их в делители и просто отобразить тот, который соответствует размерам устройства. Это, конечно, в зависимости от представлений позволяет получить в n раз больше данных, чем адаптивный дизайн на стороне сервера, при этом n равно количеству различных представлений. Однако представление может переключаться на лету, например, без перезагрузки страницы. Опять же, просто идея у меня была. Насколько я понимаю, он делает то, что делает адаптивный дизайн, просто с другим техническим подходом. Этот шаблон все еще называют адаптивным дизайном?

switch.css и index.html 

    
    @media (max-width: 991px) {
        .phone {
            display: inline !important;
        }
        .tablet {
            display: none !important;
        }
        .pc {
            display: none !important;
        }
    }
    
    @media (min-width: 992px) and (max-width: 1199px) {
        .phone {
            display: none !important;
        }
        .tablet {
            display: inline !important;
        }
        .pc {
            display: none !important;
        }
    }
    
    @media (min-width: 1200px) {
        .phone {
            display: none !important;
        }
        .tablet {
            display: none !important;
        }
        .pc {
            display: inline !important;
        }
    }
    
    html {
        font-family: sans-serif;
    }
    
    h1 {
        font-size: 36px;
    }
 <!DOCTYPE html>
    <html>
      <head>
        <title>Am I adaptive?</title>
        <meta name="viewport" content="width=device-width" initial-scale="1">
        <link href="switches.css" rel="stylesheet">
      </head>
      <body>
        <div class="phone">
          <h1>on small screen</h1>
          <p>Here goes the view for small sized devices</p>
        </div>
        <div class="tablet">
          <h1>on medium screen</h1>
          <p>Here goes the view for medium sized devices</p>
        </div>
        <div class="pc">
          <h1>on large screen</h1>
          <p>Here goes the view for large sized devices</p>
        </div>
      </body>
    </html>

РЕДАКТИРОВАТЬ: Благодаря комментариям до сих пор! Я хочу подчеркнуть: я полностью согласен с тем, что это в значительной степени определение анти-паттерна. Я надеюсь, что мой вопрос проясняет это! Я не считаю это практичной вещью. Тем не менее, меня интересует, как это называется (если оно вообще называется) или по-прежнему адаптивно / отзывчиво по определению. Если нет, то почему?

Источник

1 ответ

На мой взгляд, это больше похоже на анти-шаблон или "отзывчивый" шаблон дизайна.

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

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

Источник
Другие вопросы по тегам