我最近才真正开始尝试学习如何进行网络开发，而我真正投入其中的原因是因为我对如何制作它非常好奇:https://imgur.com/a/dvghHmD . 不是聊天，而是在左下角，你可以看到我在看什么。我真的很想做一些类似的东西，带阴影。目前，这就是我得到的:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
}
<style>
.rectangle {
height: 100px;
width: 400px;
background-color: #FFFFF;
border-radius: 15px;
position: fixed;
bottom: 0;
margin-bottom: 2.5%;
margin-left: 2.5%;
}
.rectangle {
-webkit-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
}
.rectangle class = "full-height"
#rectangle {
}
</style>
<style>
.text {
color: #151515;
text-align: left;
width: 300px;
font-family: 'Roboto', sans-serif;
position: absolute;
bottom: 0;
margin-bottom: 2%;
margin-left: 6%;
</style>
</head>
<body>
<div class="rectangle"></div>
<div class="text"> </div>
<div class="text"><span class="text"> <h2 style="font-size:21px"> This is a test text! This text is quite fine. I have no idea what I'm doing. <h2> </span>
</div>
</body>
</html> 好吧，你很可能会说我不知道我在做什么。我真的很享受在这方面的工作，但我仍然不知道如何做很多事情。以下是其中的一些内容:
- 如何使这样的框始终根据屏幕尺寸显示？
- 如何将文本作为框的“父级”，以便文本根据框缩放，而不是独立缩放？我不知道如何更好地描述它。
- 有没有更有效的方法来解决这个问题(或者是否有任何 github 存储库已经制作了这个，所以我可以看看那个代码)？
对于看到这篇文章的任何人，非常感谢您的阅读。非常感谢任何帮助!
最佳答案
您可以使用相对定位来根据屏幕调整框的大小
或
您可以使用“响应式媒体查询”( https://www.w3schools.com/css/css_rwd_mediaqueries.asp )
要根据弹出窗口缩放文本，您可以使用 'rem' 单位是 CSS。它基本上所做的是根据父级的大小缩放您的文本。
检查此链接:( https://css-tricks.com/almanac/properties/f/font-size/ )
希望这对您有所帮助。 :)
关于html - 左下角的消息框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54843817/