Как использовать метатег viewport для масштабирования макетов фиксированной ширины, чтобы соответствовать различным ширинам экрана.

Question

Я работаю над устаревшим сайтом с фиксированной шириной и хочу создать более оптимальный опыт для пользователей планшетов, реализовав пару адаптивных макетов. Первый макет будет иметь ширину 600 пикселей и будет отображаться на устройствах с шириной экрана 600px - 768px. Второй адаптивный макет будет иметь широкий дизайн 769 пикселей, и он будет отображаться на устройствах с шириной экрана 769 - 1023.

Я хочу знать, как я могу использовать метатег viewport, чтобы увеличить масштаб дизайна до мобильных браузеров с шириной больше, чем исходный дизайн.

Например, когда модель 600px просматривается на устройстве с шириной экрана браузера 768px, как я могу сделать меньший дизайн занимать всю ширину экрана?

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

Answer 1

Это называется отзывчивое развитие сети. Первый шаг - поставить ниже тег в свой код внутри части основного тега.

Для гибкого дизайна используйте медиа-запросы: Теперь используйте медиа-запросы, вот хороший пример media queries. Также узнайте, как его использовать. Вот небольшой фрагмент кода, который поможет вам: -

 <style> 
     .clear{ clear:both;} 
     /*this will work for desktop*/ 
     @media only screen and (min-width: 801px){ 
     #container { 
      position:relative; 
      width:80%; 
      margin: 0 auto; 
     } 
     /*this will work for tablet*/ 
    @media only screen and (max-width: 800px) and (min-width: 521px) 
    { 
    #container { 
     position:relative; 
     width:80%; 
     margin: 0 auto; 
    } 
     /*this will work for mobile*/ 
     @media only screen and (max-width: 520px) and (min-width: 320px) 
     { 
     #container { 
      position:relative; 
      width:80%; 
      margin: 0 auto; 
     } 

</style>