Как создать большой заголовок, который будет работать как на большом, так и на маленьком экране?
Я работаю над основным заголовком веб-страницы. Я хочу установить фоновое изображение высотой 100% и большой заголовок перед ним.
Вот как я сделал:
В файле CSS:
body, html {
height: 100%;
}
.bg {
background-image: url("../img/image.JPG");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bigtitle {
/** padding-left:15%;***/
padding-top: 20%;
color: white;
font-family: 'Trocchi', serif;
font-size: 1500%;
font-weight: normal;
margin: 0;
/*line-height: 1.0em;*/
}
В HTML-файле:
<div class = "bg">
<center><h1 class = "bigtitle">My title</h1></center>
</div>
Я также пытался установить размер заголовка с помощью em, но это была та же проблема.
Это хорошо на настольном компьютере, но совершенно не работает на мобильных устройствах или на маленьком экране. Как сделать, чтобы работать на мобильном телефоне и на рабочем столе?
Ответы 3
попробуйте использовать это, у меня нет проблем с этим, вы можете установить желаемую высоту, должно работать как на мобильном, так и на рабочем столе.
.bg {
background-image: url("../img/image.JPG");
height: calc(100vh);
width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Снимите высоту, тогда ваше изображение будет равно размеру фона: обложка;
.bg {
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
https://jsfiddle.net/bw7xmytp/
Это правда, но текст на ней все равно не читается на маленьких экранах.
Я бы просто оставил это как комментарий, но у меня пока нет разрешений: Вы можете вручную настроить размер заголовка по своему вкусу для разных размеров экрана, используя медиа-запросы в вашем css. Хотя они, вероятно, не самый эффективный способ добавить отзывчивости, они творили чудеса для меня.
Медиа-запросы позволяют вам точно установить, какой размер вы хотите, чтобы ваш заголовок был на любом конкретном размере экрана. Например, на экране телефона можно уменьшить размер текста, чтобы он не выходил за пределы экрана.
это делает фон очень хорошим, но текст на нем все еще торчит из фонового изображения на маленьком экране и не читается.