Резиновое поле с ячейками

[PavelTkachev]

Пытаюсь выбрать технологию для отображения резинового поля состоящего из квадратных ячеек, размером 10 на 10.

 

Нужно чтобы оно было резиновым и при увеличении размера экрана занимало 90% по большему размеру (ширине или высоте).

 

Можно ли это сделать с помощью html+css или потребуется обязательно JS для определения что больше: высота страницы или ширина? Или это может сделать svg? Или вообще cаnvas только?

[klierik]

http://jsfiddle.net/J8w66/

[PavelTkachev]

Ячейки не квадратные. Всегда должен быть квадрат, который не выходит за размеры экрана.

[klierik]

а экраны то не квадратные.

можно поставить фиксированную ширину.

[PavelTkachev]

В этом и дело, что не квадратные. И ещё у одних может быть ширина больше длинны, а у других наоборот. И надо сделать такое поле, которое будет квадратным и адаптироваться под размеры экрана.

 

С помощью html+css это можно сделать? Я слышал про какие-то формулы в css, что там можно делать вычисления исходя из высоты и ширины.

 

Можно определить размеры экрана с помощью JS и потом применить стили в зависимости от размеров экрана. Но может можно сделать что-то иное?

 

Ещё я думал сделать svg и его растягивать. Но тут также вопрос об определении 90% по ширине ставить или по высоте.

Фиксированная ширина не подойдёт, так как дизайн должен быть резиновый для работы на любых устройствах.

 

Можно, ещё определять стили с помощью media.

 

Что посоветуете?

[klierik]

в таком случае не будет привязки к 90%.

Основной точкой отсчета будет или ширина или высота.

как вариант: http://jsfiddle.net/J8w66/1/

[PavelTkachev]

Спасибо за разъяснения. В общем без JS никак. Жаль.