Формат HTML-столбцов в зависимости от разрешения экрана

Question

Я ищу метод jQuery или CSS, чтобы количество столбцов на макете веб-сайта увеличивалось и уменьшалось в зависимости от сайта вашего окна просмотра. Например, у iphone будет 1 столбец, 800x600 будет иметь 2, 1024x768 будет иметь 3 ... и так далее

Любые идеи?

Answer 1

Вот несколько проектов, которые решают эту проблему и находятся на переднем крае динамических CSS и размеров экрана:

• 320 and up:

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

• Lessframework:

  Менее Framework представляет собой систему CSS сетки для проектирования адаптивных веб-сайтов.Он содержит 4 макета и 3 набора типовых пресетов, все на основе одной сетки .

Answer 2

Отъезд CSS Media Queries

В качестве альтернативы, вы можете пойти на Different Stylesheets for Differently Sized Browser Windows

Answer 3

В статье я смотрел на свопы таблицу стилей документа на основе размера экрана. Чтобы это сработало, вам нужно знать результаты экрана, которые вам нужно настроить, и создать таблицу стилей для каждого.

проверка по следующему адресу: ч http://www.ilovecolors.com.ar/detect-screen-size-css-style/

Answer 4

Вы можете использовать медиа-запросы для этого, с JQuery в качестве запасного варианта для Internet Explorer 8 или ниже.

Вот пример среднего разрешения:

@media screen and (min-width: 800px) and (max-width: 1024px) { 

    .col1 {.... /* rules go here */ } 
    .col2 {.... } /* rules go here */ 
    } 

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

Answer 5

Если вы делаете это с JQuery -

Во-первых, определить класс для вашего контента обертки, которые могли бы сделать страницу соответствующий # раскладок, например

<div id="page" class="1_column">Content</div> 

Далее, вам нужно функция, которая может изменить класс этой обертки элемента на основе значений

$(window).height(); 
$(window).width(); 

Тогда вы должны были бы прослушиватель событий в вашу функцию, что и на странице изменение размера и события загрузки страницы

$(window).load(myFunction); 
$(window).resize(myFunction); 

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