Ухудшающаяся (жидкая) компоновка CSS для широкого экрана

Question

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

Вот как это должно выглядеть на широком экране: http://s1.postimage.org/1d67kaxdw/pageverywide.png

А для узкого экрана: http://s1.postimage.org/1d65wrkw4/pagenarrow.png

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

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

У меня есть макет, который центрирует правильные графические данные, как описано, но не могу понять, как заставить его горизонтально от вертикали или наоборот. Как я могу использовать один лист CSS для этого?

Answer 1

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

Что вы можете сделать, это посмотреть media query , новая функция, представленная в CSS3.Они позволяют вам определять набор определенных правил в зависимости от размера экрана, 1 файла и отсутствия JavaScript.

Вот пример

@media screen and (max-width: 600px) {
    .graphs{
       /* change position */
    }
}