Какие свойства CSS определяют, как веб-страница реагирует на изменение размера окна? - PullRequest
Новая
       7

Какие свойства CSS определяют, как веб-страница реагирует на изменение размера окна?

2 голосов
/ 31 июля 2011

Мне просто интересно, потому что я знаю, что моя страница становится бесполезной, если вы попытаетесь сделать ее слишком маленькой.Facebook, StackOverflow и почти любой другой хорошо запрограммированный сайт спокойно регулируют формат страницы, пока они не исчерпают «передышку», и в этот момент страница просто «съедается» границами браузера.Как эти хорошо запрограммированные сайты форматируют себя так хорошо, чтобы справиться с изменением размера окна?Существуют ли свойства CSS, специально созданные для этого?

Ответы [ 4 ]

2 голосов
/ 31 июля 2011

Вы можете центрировать свой сайт, используя основную «обертку» div. 

<div id="wrapper">
    //all you content here
</div>

Тогда в вашем css вашем наборе «обертка» выглядит следующим образом 

#wrapper{
    width:900px //or whatever
    margin: 0 auto; }

Это дает ему ширину и гибкое поле. Когда окно слишком маленького размера, оно просто «ест», как вы говорите.

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

Еще один способ сделать это - сделать почти все гибким, что-то вроде этого .. 

#wrapper{
    border:1px solid red;
    width:50%;
    min-width:300px;
    margin:0 25%;
    height:50px; //for display only
}

http://jsfiddle.net/jasongennaro/6FCjZ/1/

1 голос
/ 31 июля 2011

Вы должны посмотреть на "Fluid" CSS дизайны.Это правила CSS, предназначенные для управления шириной страниц.

Обычный способ сделать это - использовать max-width и min-width для управления всей шириной веб-сайта.

Например:

Нажмите здесь, чтобы увидеть живой пример. 

<html>
<head>
    <title>Width Test</title>
    <style>
        #main-content {
            background-color: #EEF;
            border: 1px solid #003;
            max-width: 45em;
            min-width: 20em;
            padding: 1em;
            margin: 0 auto; /* center */
        }
        .box {
            border: 1px solid #000;
            background: #363;
            color: #fff;
            padding: .25em;
        }
        .left {
            float: left;
            margin: .5em 1em .5em 0;
        }
        .right {
            float: right;
            margin: .5em 0 .5em 1em;
        }
    </style>
    </head>
    <body>
        <div id="main-content">
            <p>Resize Me...</p>
            <span class="box left">left</span>
            <span class="box right">right</span>
            <p>Fluid Layout</p>
        </div>
    </body>
</html>

Ключевым элементом здесь является стиль на #main-content.Все остальное, чтобы вы могли увидеть это в действии.

1 голос
/ 31 июля 2011

Оба этих сайта имеют фиксированную ширину, но с расширяющимися фонами заголовков.Ничего особенного не происходит.

Заголовок (сине-серая полоса) имеет ширину 100% с контейнером фиксированной ширины внутри, центрированным.

0 голосов
/ 31 июля 2011

Определение width пикселей для div обычно дает ему фиксированную компоновку, в то время как использование процентов дает плавную компоновку.

Для получения удовольствия, ознакомьтесь с 960.gs, который использует фиксированную компоновку и отлично подходит для избежания кросс-браузерных проблем:

http://960.gs/

Существует также жидкая версия 960.gs:

.

http://www.designinfluences.com/fluid960gs/

...