Как сделать гибкую компоновку?

У меня есть несколько страниц на моем веб-сайте, которые хорошо смотрятся только на широкоэкранном мониторе. Что-то вроде этого:Как сделать гибкую компоновку?

|========================| 
|  H E A D E R  | 
|========================| 
|Block1 |  B I G  | 
|-------| D A T A  | 
|Block2 | B L O C K | 
|========================| 
|  F O O T E R  | 
|========================|

Для людей с небольшим дисплеем это не очень дружелюбно.

Я вижу несколько вариантов с тем, как обращаться с этим.

Вариант A: Удаление части контента или реструктурировать его для того чтобы иметь его обычно отображается для узких дисплеев

|===============| 
| H E A D E R | 
|===============| 
|Block1 | Block2| 
|---------------| 
|  B I G  | 
| D A T A | 
| B L O C K | 
|===============| 
| F O O T E R | 
|===============|

Вариант B: Разрешить пользователям настроить, как они хотят, чтобы эти страницы (ы) : полноэкранный режим или режим с узким экраном. В первом случае страница будет отображаться, как сейчас (1-я таблица), и если люди выбирают второй подход, она будет настроена так, как описано в Варианте A (2-я таблица). Этот элемент требует еще выполнить элемент №1, который является приемлемым и приемлемым

Опция C: Но лучший подход, как мне кажется, делает UI гибким: если страница широкая, тогда элементы содержимого div отображаются в строке последовательность; если страница узкая, то они отображаются в последовательности столбцов.

Итак, идея состоит в том, что Block1, Block2 будет иметь такую же ширину и высоту и будет автоматически размещаться браузером.

Вопрос №1: как реализовать вариант C с использованием только HTML + CSS-разметки?

Я действительно понимаю, что Block1, Block2 - должен иметь style = "float: left", но когда я делаю блок 2, всегда справа от блока 1, если окно браузера слишком узкое. И «большой блок» никогда не находится справа от 2 маленьких (см. Мой код ниже)

Вопрос №2: Имеет ли смысл пытаться реализовать вариант C?

P.S. Вот мой прототип:

<html> 
<head><title>Test blocks</title></head> 
<body> 

<style type="text/css"> 
div { 
    border: 1px solid black; 
    position: relative; 
} 
div.b1 { 
    width:300px; 
    height: 200px; 
    float: left; 
} 
div.b2 { 
    width:300px; 
    height: 100px; 
    float: left; 
} 
div.big { 
    width: 800px; 
    height: 200px; 
    float: left; 
} 
</style> 
<div class="b1"> Block 1 </div> 
<div class="b2"> Block 2</div> 
<div class="big"> Big Data block</div> 

</body></html>

P.P.S. Я помещаю границу на видимую, указываю только те divs, я не буду иметь ее в окончательной разметке

источник

2013-07-18 Budda

Это называется _responsive design_. Просмотрите медиа-запросы. – SLaks

Не могли бы вы пояснить, что вы имеете в виду под «медиа-запросами»? – Budda

Google - ваш друг. Найдите эти две фразы, индивидуально –

Если вы не хотите использовать рамки (мой совет, чтобы использовать его для сэкономить много денег, однако использовать ZURB фундамент, который является подвижным первым дизайном), вы должны узнать, что средства массовой информации запрос является:

@media (min-width:500px){ 
    CSS code that is readable only in device with more than 500px screen ; 
} 


@media (max-width:500px){ 
    CSS code that is readable only in device with less than 500px witdh screen; 
}

и добавить мета в к вашему HTML кода

<meta name="viewport" content="width=device-width, initial-scale=1.0">

чтобы узнать его и построить что-то, как вы хотите, не узнать, как используйте фреймворк (bootstrap o Zurb foundation), но прочитайте код их «GRID-системы» и ... возьмите искушение!

источник

2013-07-18 08:04:39 PaoloCargnin

Да, это помогло! – Budda

Рад быть полезным :) – PaoloCargnin

Используйте что-то вроде Bootstrap. Он имеет «это» значение отзывчивый дизайн встроенный в каркас.

http://twitter.github.io/bootstrap/

источник

2013-07-18 02:35:08 feitla

Привет, Feitla, спасибо за информацию. Вам действительно нужно научиться новой структуре, чтобы выровнять несколько div? Вероятно, и, скорее всего, речь идет не только об этих трех div, но и о всей новой структуре, когда я твердо верю, что чистый CSS3 может работать ...? Не могли бы вы прокомментировать это? – Budda

Это не просто «выровнять несколько div». Он должен выровнять все, включая все, что находится в div. Идея использования структуры - это последовательность и соблюдение стандартов. Если вы хотите, чтобы ваш сайт был отзывчивым ... используйте доступные инструменты. Но чтобы ответить на ваш вопрос, помимо бутстрапа есть другие инструменты, которые могут помочь вам создать получувствительный сайт. Например, [1kbgrid.com] (http://1kbgrid.com) или [1200px.com] (http://1200px.com) или [responsivegridsystem.com] (http://responsivegridsystem.com) и т. Д. Используйте Google , – feitla

Как сделать гибкую компоновку?

ответ

Смежные вопросы