Как мы можем реагировать высоту заголовка

У меня есть структура заголовка моей страницы какКак мы можем реагировать высоту заголовка

<header> 
     <div class="clouds"></div> 
</header>

облако не меняется с изменением шириной экрана. Я хочу сделать их отзывчивыми. Как я могу работать с CSS.

В настоящее время я использую следующий код CSS.

header{ 
    width:100%; 
    height:100%; 
} 

.clouds{ 
    z-index: -98; 
    position: absolute; 
    top:0px; 
    left: 0px; 
    width:100%; 
    background: url('../images/clouds.png') repeat-x; 
    -webkit-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100% !important; 
    height: 30%; 
    min-width: 960px; 
}

источник

2013-10-04 Programmer

Вы не должны добавлять высоту и ширину, это должны делать это, как минимум

background: url('../images/clouds.png') 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center;

источник

2013-10-04 11:24:21

Thankyou, я использовал размер фона: с шириной и высотой, и он работает. – Programmer

Используйте CSS-запросы СМИ для этого.

http://css-tricks.com/css-media-queries/

источник

2013-10-04 11:21:19 Jonathon

Здесь приведен пример кода для отклика:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     .box { 
     width: 100%; 
     border: 1px solid #555; 
     font: 14px Arial; 
     background-color:red; 
     display: -webkit-box; 
     -webkit-box-orient: horizontal; 
     -webkit-box-pack: left; 


     display: box; 
     box-orient: horizontal; 
     } 



     .box > div:nth-child(1){ background : #FCC; -webkit-box-flex: 10; 
} 
     .box > div:nth-child(2){ background : #CFC; -webkit-box-flex: 20; 
} 
     .box > div:nth-child(3){ background : #CCF; -webkit-box-flex: 30; 
} 

     .box > div:hover { 
     width: 200px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="box"> 

     <div>HTML5</div> 
     <div>CSS3</div> 
     <div>Javascript API for HTML5</div> 
    </div> 
    </body> 
</html>

Demo: http://jsfiddle.net/TLnC3/

источник

2013-10-04 11:24:48

Ваш код работает нормально для меня. Хотя у вас есть плохие коды.

Вы не должны

header{ 
    width:100%; 
    height:100%; 
}

если ваш собирается сделать вашу ширину .cloud 100%, а высота не является необходимым.

Возможно, вы считали, что это не работает из-за минимальной ширины. Это ограничивает минимальную ширину .clouds. Поэтому, если вы переделаете его ниже своей минимальной ширины. Ширина вашего .clouds не изменяется на размер вашего экрана.

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

источник

2013-10-04 11:32:36

header{ 
    width:100%; 
    height:100%; 
} 

.clouds{ 
    z-index: 98; 
    position: absolute; 
    top:0px; 
    left: 0px; 
    width:100%; 
    background: url('../images/clouds.png') repeat-x; 
    -webkit-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100% !important; 
    height: 30%;  
}

источник

2013-10-04 11:39:30 Mahib

Как мы можем реагировать высоту заголовка

ответ

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