Условная шкала видового экрана в зависимости от ширины экрана «слишком мала или слишком велика»?

Question

Я все еще новичок в отзывчивом дизайне, поэтому извините, если мой вопрос не имеет смысла.

Я в настоящее время реализует два набора CSS для двух ширины экрана:

@media screen and (max-width:659px) { ... } 

@media screen and (min-width:660px) { ... } 

В первом сете у меня есть 480px широкий стол с содержанием и центрируется margin auto. Я рад иметь немного фонового пространства слева и справа, если размер экрана составляет от 480 пикселей до 659 пикселей.

Второй набор добавляет дополнительную колонку влево, делая таблицу шириной 660 пикселей.

Я беспокоюсь, когда ширина экрана ниже 480 пикселей или значительно выше 660 пикселей. Моя таблица будет усечена, или ее левая и правая поля будут слишком много. Именно здесь масштабирование может быть интересным.

Я читала, что рекомендуется реализовать видовых мета-тег следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Но это правильное решение для моей проблемы? Каков правильный способ реализации метатега моего просмотра? Можно ли автоматически «масштабировать, чтобы соответствовать», когда таблица имеет ширину 480 пикселей или 660 пикселей? Если да, то как?

Answer 1

Существует довольно аккуратное решение для гибких столов на игровой площадке Zurb.

http://zurb.com/playground/responsive-tables

Это все еще в детской площадки, но до сих пор я использовал его, и он работает очень хорошо. И с любым типом отзывчивого дизайна вы всегда захотите иметь мобильный видовой экран на своей странице. Это семантика Дорогой Пал. :) И это действительно сделает ваш отзывчивый дизайн намного проще.