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

Question

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

0

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

<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;
}

Programmer 04 окт. 2013, в 14:01

Источник

Теги:

php

jquery

html

css

responsive-design

5 ответов

0

Для этого используйте медиа-запросы CSS.

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

Jonathon 04 окт. 2013, в 10:08

0

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%;    
}

Mahib 04 окт. 2013, в 10:05

0

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

Вам не нужно

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

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

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

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

Andrew James Ramirez 04 окт. 2013, в 09:51

0

Вот пример кода для отзывчивости:

<!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>

Демо: http://jsfiddle.net/TLnC3/

Mayank Sharma 04 окт. 2013, в 08:34

Ещё вопросы

David Jones · Accepted Answer · 2013-10-04T09-29-00.000Z

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

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

Спасибо, я использовал background-size: содержит с шириной и высотой, и это работает.