HTML, CSS: адаптивный заголовок с логотипом и текстом.

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

http://nl.wix.com/website-template/view/html/936?&viewMode=mobile

введите здесь описание изображения

введите здесь описание изображения

Как только я использую другую ширину, 30° перемещаются в другую позицию, что означает, что сайт не отвечает должным образом. Я понятия не имею, как это исправить. Вот мой код:

HTML:

<body>
    <div class="header">
        <h1>30 &deg;C</h1>
        <div class="clearfix"><img src="./img/banner.png" alt="banner"> </div>
        <p>Beginning application developer</p>
    </div>
</body>

CSS:

.header {
    background-color: #7A7CB1;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

.header img {
    width: 62.5%;
    margin-top: 2.5%;
    margin-left: 6.75%;
    float:left;
}

.header h1 {
    position: absolute;
    top: 30%;
    left: 30%;
    font-size: 200%;
}

.clearfix {
    overflow: auto;
}

.header p {
    margin-left: 6.75%;
    font-family: Verdana, geneva, sans-serif;
    font-size: 13px;
}

Я хочу, чтобы 30° были ниже логотипа, как на фото, но логотип и текст должны становиться меньше или больше (отзывчивыми), если ширина телефона меньше или больше.


html css responsive velo
person Lewis Algawari    schedule 08.05.2017    source источник
comment
Какой вопрос?   -  person DeclanPossnett    schedule 08.05.2017
comment
Каким вы хотите видеть конечный продукт? 30 градусов справа от термометра всегда? текст ниже?   -  person StefanBob    schedule 08.05.2017
comment
Я хочу, чтобы сайт был отзывчивым. Так что 30 градусов должно быть меньше, если ширина телефона меньше, логотип к. проблема в том, что положение 30 градусов должно оставаться там, где оно на фото, но не на другой ширине   -  person Lewis Algawari    schedule 08.05.2017
comment
При установке размера шрифта в процентах он использует процент от базового размера шрифта документа, а не его контейнер, такой как ширина и высота. В ответе Аруна рассказывается, как изменить размер шрифта в зависимости от ширины экрана/окна. Что касается позиционирования, не могли бы вы сделать скрипку? Я был бы рад изменить его, чтобы правильно расположить, и объяснить, что в настоящее время вызывает проблемы.   -  person Colby Sargent    schedule 08.05.2017
comment
В качестве альтернативы, чтобы плавно масштабировать размер шрифта, вы можете использовать единицу ширины области просмотра (vw). К сожалению, это будет масштабироваться вместе с окном, а не с вашим изображением, но это возможно с некоторыми настройками. Опять же, если вы можете загрузить изображение и сделать скрипку, я посмотрю, что я могу сделать :)   -  person Colby Sargent    schedule 08.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите, чтобы текст становился больше/меньше на устройствах разной ширины, вам нужно добавить Экраны мультимедиа

Вот пример медиаэкрана

  @media only screen and (max-width:940px){ /* Tablets*/ 
    h1{
       font-size:12px;
}
    }

Это происходит, когда максимальная ширина устройства составляет 940 пикселей (средний размер планшета). Размер шрифта h1 установлен на другой размер.

person user4358892340    schedule 08.05.2017