Исправлен заголовок с минимальной шириной

Question

У меня есть фиксированный заголовок на странице, используя position: fixed;.

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

Из моего исследования я узнал, что нет никакого решения для CSS. Но что будет JS-one?

JSFiddle example

Answer 1

Вы можете использовать следующие CSS:

@media all and (max-width:400px){ 
.navbar.navbar-default.navbar-fixed-top { 
    position: relative; 
    } 
} 

Это даст свой желаемый выход. Когда ширина окна будет ниже 400px;, тогда ваш заголовок будет прокручиваться. Вы можете изменить его с помощью 800px; или в зависимости от того, что вам нужно.

Проверьте свой обновленный Fiddle.

Edit:

Вы должны научиться media query для этого. В вашем коде navbar есть фиксированная позиция. Здесь мы применяем медиа-запрос, например: @media all and (max-width:400px). Это означает, что если ширина окна lessthan 400px, то это позиция, которую мы установили relative. подобный: position: relative;.

Этот медиа-запрос css применяется до max-width из 400px; вы можете изменить его согласно вашему требованию. Вы можете узнать больше от Here.

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

Answer 2

Вы можете использовать CSS медиазапросы к стилю вещи по-разному на основе ширины окна. В приведенном ниже примере заголовок будет исправлен, только если ширина окна составляет 800 пикселей или более.

Пример

@media all and (min-width:800px){ 
    header{ 
     position:fixed; 
    } 
} 

More informartion on media queries