Динамически переупорядочивать плитки в зависимости от размера браузера или мобильного экрана

Question

Какой бы экран не использовался для просмотра страницы, я бы хотел показать как можно больше плиток.Различные сценарии включают:

• Мобильный браузер (iPhone, Android)
• iPad или Android Table или Kindle Fire
• Узкое окно браузера (Safari, Chrome, то есть Firefox, operta и т. д.)
• Полноэкранное окно браузера

Одно из решений, о котором я подумал, - использовать 960.gs и adaptive.js ... однако, когда я установил размер div, например:

div class = "tile grid_4"

, я заметил, что adaptive.js будетизменить размер плитки (поскольку различные CSS-файлы изменяют размер столбцов) ... Однако мне нужно сохранить фиксированный размер плитки (310px X 450px) ....

Возможно, мне нужно динамическипереименуйте класс div так, чтобы число столбцов x col width = 310px?

Один сайт, который делает это, http://pinterest.com

И чтобы увидеть, что каждая плитка похоже, пожалуйста, проверьте http://jsfiddle.net/hagope/76jjp/

Answer 1

Посмотрите на CSS3 медиа-запросы .Я рекомендую вам прочитать фантастическую статью A List Apart по Отзывчивый веб-дизайн , которая охватывает тему и является хорошей отправной точкой.

После того, как вы освоите основыотсортированный, вы можете настроить таргетинг на определенные устройства, используя запрос device-width.Для нацеливания на дисплеи высокой плотности (например, дисплей сетчатки iPhone4) вы можете посмотреть запрос device-pixel-ratio.

Надеюсь, это поможет.

Answer 2

Если я не понимаю, что вы хотите, это должно быть выполнимо только с CSS.Создайте для каждой плитки стиль display: block (вместе с фиксированной шириной и высотой), а затем оберните каждую плитку в элемент контейнера display: inline; float: left;.Добавьте еще CSS, который вы хотите для стиля, и он должен работать нормально.

Вот пример: http://gpittarelli.com/so_examples/inline_tiles.htm