Question

我直到最近才真正开始尝试学习如何进行Web开发，而我之所以真正参与其中，是因为我对如何实现这一目标非常好奇：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存储库，所以我可以看一下该代码）？

对于任何看到此内容的人，非常感谢您的阅读。非常感谢您的帮助！

Answer 1

您可以使用相对定位来根据屏幕调整框的大小

OR

您可以使用“响应式媒体查询”（）

要根据弹出窗口缩放文本，可以使用'rem'单位为CSS。它的主要作用是根据父级的大小缩放文本。

检查此链接：（https://www.w3schools.com/css/css_rwd_mediaqueries.asp）

希望这会有所帮助。：）

Answer 2

在开始使用CSS之前，请先适当地构建HTML。您问有关育儿项目的问题，这是通过用开始/结束标签包装东西来完成的：

HTML：

<div id="message_container">
  <div id="message_content">message</div>
</div>

CSS：

正确使用HTML，然后即可进行样式设置

#message_container {

  /* to position it at bottom-left (dependent on the parent) */
  position: absolute;
  bottom: 2em;
  left: 2em;

  /* to position the contents within the box (ie the message text) */
  display: flex;
  justify-content: center;
  align-items: center;

  /* to style the message box in particular ways */
  padding: 2em;
  border-radius: 40px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 200px;
}

响应式优化：

一旦您的结构（HTML）和样式（CSS）牢固，您就可以考虑响应能力了。为此，您需要研究CSS @media规则，以根据某些条件（例如屏幕宽度）更改框样式属性。这都是主观的，因此您必须反复试验以清理不同屏幕尺寸的布局。

例如：

/* for screens smaller than 320px width */
@media (max-width: 320px) {

  /* make the message slimmer, and center it */
  #message_container {
    padding: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    left: 50%;
    transform: translate(-50%,0);
  }

  /* make the message text smaller */
    #message_content {
        font-size: 0.9em;
    }
}

控制框：

如果您希望此框根据不同的事件而显示和消失（例如，页面完全加载后2秒钟，或者当用户单击其他地方的内容时），那么您将在使用Javascript。有很多教程。

这是常规过程。

Codepen

#message_container {

  /* to position it at bottom-left (dependent on the parent) */
  position: absolute;
  bottom: 2em;
  left: 2em;

  /* to position the contents within the box (ie the message text) */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* to style the message box in particular ways */
  padding: 2em;
  border-radius: 40px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 200px;
}

@media (max-width: 320px) {
  
  #message_container {
    padding: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    left: 50%;
    transform: translate(-50%,0);
  }
  
    #message_content {
        font-size: 0.9em;
    }
}

<div id="message_container">
  <div id="message_content">message</div>
</div>

左下方的消息框

2 个答案: