CSS: Отзывчивый дизайн

Question

Я разработал Office Ribbon для HTML, который выглядит так же, как и Office Ribbon. Вот скриншот выборки из него:

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

Однако, когда вы смотрите в офисе ленты, вы увидите следующее:

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

Но теперь я читаю различные вещи о дизайне ответа, и я вижу, что это делается с помощью так называемых запросов СМИ:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
    body { 
    background: #ccc; 
    } 

}

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

Итак, скажем, когда я изменяю размер страницы, и я запускаю последний элемент ленты, это должно быть меньше. Когда я изменю размер, я должен вернуться к группе, например, «Удалить» и начать делать значки там меньшими.

Я знаю, что этот вопрос звучит сложнее, но я надеюсь, что есть кто-то, кто хочет помочь мне в этом.

Answer 1

Установить ширину 100% для вашего тела

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
body { 
    background: #ccc; 
width: 100%; 
} 
}