如何解决如何在html中更改屏幕大小的div高度？
我正在创建一个视差滚动网站。您可以在 https://titanoboa.info 上看到它。但是，我的 div 与文本和屏幕大小不符。有人可以给我代码，以便如果在移动设备或大屏幕上查看它，它会随着文本而变化吗？非常感谢，我是初学者，这对我来说很新。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
.parallax1 {
/* The image used */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Titanoboa_2_%287684792104%29.jpg);
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
/* The image used */
background-image: url(https://cdn.britannica.com/13/132613-050-0093E19F/Titanoboa-cerrejonensis-image-anaconda-comparison-vertebrae-world.jpg);
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
p {
font-family: Arial,sans-serif;
}
h2 {
font-family: "Audiowide",sans-serif;
padding: 10px 10px 0px 10px;
}
</style>
</head>
<body>
<div class="parallax1"></div>
<div style="color:white;height:175px;background-color:rgb(46,44,46);font-size:15px;">
<h2>What was Titanoboa?</h2>
<p style=" padding-left: 10px;"> Titanoboa lived over 60 million years ago in an era called the Paleocene Epoch. Its fossils were found in a coal mine in Colombia,where it gets its name,titanoboa cerrejonensis. Sounds scary,right? Don't worry it gets much worse than that. You have probably have heard of huge snakes that "swallow" up humans,like the anaconda,and pythons. But titanoboa makes those seem laughable. Introducing the 40 foot snake,titanoboa. Imagine two adult giraffes laid on their sides,one after the other,and titanoboa would still be longer! In addition,this creature was 3 feet in thickness,so up to an adult's waist,and weighed 1.4 tons,the same as a sudan! </p>
</div>
<div class="parallax1"></div>
<div style="color:white;height:220px;background-color:rgb(46,46);font-size:15px;">
<h2>What did it eat and where did it live?</h2>
<p style=" padding-left: 10px;"> Did you kNow that the largest snake living today was only half the size of titanoboa? It was so big it Could swallow a hippopotamus whole,but unfourtunately for it,they didn't exist at the time. They lived in swamps and rivers,where they Could easily find their favourite food,large fish. It liked a warm climate,which made the animal so huge. It Could be found in Colombia,Venezuela,Brazil,and neighbouring countries. The amazon rainforest was a perfect place for it to rule. Although scientists have only found about 30 individuals,titanoboa was most likely a huge presence for the animals of the time. When titanoboa killed,it did so in an extremely sophisticated manner. In a sharp attack,it quickly wrapped its large body around its victim and strangled it. When it died,it was swallowed whole. And on the inside,it was even more of a nightmare. It faced compression of weight more than the brooklyn bridge,which helped it digest,and it stayed there for a very long time. Titanoboa's massive size helped it find food very easily. You can see the difference in size just from the vertebrae. In the picture below,the left vertebrae is the anaconda,and on the right,titanoboa.</p>
</div>
<div class="parallax2"></div>
<div style="color:white;height:150px;background-color:rgb(46,46);font-size:15px;">
<h2>How did it get so big? </h2>
<p style=" padding-left: 10px; font-size:15px;">Titanoboa loved the hot climate,and that had a lot of effect on its size. When climate gets hotter,animals get much bigger. Back then,temperatures were at least 15 degrees hotter than today. And with climate change on the rise,titanoboa might just come back. Luckily for us,that would take millions of years. The only reason titanoboa died out,was because the climate plummeted and suited smaller snakes,like the ones we see today. It is very interesting for scientists to find large creatures like titanoboa in million years after dinosaurs died out. </p>
</div>
</body>
</html>
再次感谢，祝您有美好的一天！
解决方法
您可以使用 css 媒体查询来检测用户是否使用宽度较小的设备（移动设备），如果是，您可以以某种方式设置文本样式。
代码：
<!--Now if the user is on a mobile device screen width,the background will become lightblue-->
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
或者以您的情况为例。：
@media only screen and (max-width: 600px) {
.myDiv {
width: 50px;
}
}
链接到关于媒体查询的一个很好的教程：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
