Question

我在这里度过了最艰难的时光......我已经搜索了一段时间，并且无法弄清楚如何正确地让我的文本在我的父容器中正确地重新调整大小。

以下是代码：

html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
  width: 100%;
  padding-bottom: 25px;
  font-size: 100%;
}

input {
  font-family: "Roboto";
  position: absolute;
  top;
  25.5px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background-color: transparent;
  text-align: right;
  border-width: 0;
  width: 100%;
  margin: 0 0 .1em 0;
}

.heart_button {
  position: absolute;
  top: 25.5px;
  right: 55px;
}

.heart_button:hover,
.heart_button:active,
.heart_button:focus {
  color: #dd0239;
}

.heart_background {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #000000;
  opacity: .1;
  width: 65px;
  height: 30px;
  border-radius: 15px;
}

.box {
  margin: 50px auto;
  position: relative;
  max-width: 90%;
  height: 490px;
  width: 700px;
  background-color: #18a0ff;
  box-shadow: 1px 15px 50px 2px;
}

.quote_image {
  position: absolute;
  opacity: .1;
  top: 62px;
  left: 51px;
}

.image_overlay {
  background-color: #282a37;
  width: 170px;
  height: 490px;
  position: absolute;
  float: left;
}

.thumbnail_image {
  position: absolute;
  float: left;
  opacity: .12;
  display: inline-block;
}

.text_container {
  left: 200px;
  width: 400px;
  height: 338px;
  max-width: 90%;
  word-wrap: break-word;
  position: absolute;
}

h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 3.7em;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  width: 100%;
  word-wrap: break-word;
  
}

.author_name {
  position: absolute;
  left: 206px;
  bottom: 0px;
}

h3 {
  font-family: Open Sans;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1em;
  text-align: left;
  color: #fff;
}

p {
  font-family: "Roboto";
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

h6 {
  font-family: Open Sans;
  font-weight: light;
  font-size: 1em;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

nav {
  position: absolute;
  left: 35px;
  bottom: 28px;
}

html {
  background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#footer {
  clear: both;
}

@media screen and (max-width: 649px) {

  .box {
    width: 450px;
    height: 350px;
    max-width: 90%;
  }
  
  h1 {
    font-size: 2em;
    word-wrap: break-word;
  }
  
  .text_container {
    width: 280px;
    height: 236.6px;
    max-width: 90%;
  }
}

<body>
  <div class="box">
    <div class="heart_button">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
    </div>
    <div class="heart_background">
    </div>
    <div class="image_overlay">
    </div>
    <div class="thumbnail_image">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
    </div>
    <div class="text_container">
      <h1>Don't You think that if I were wrong, &nbsp;&nbsp; &nbsp; I'd know it?</h1>
    </div>
    <div class="author_name">
      <h3> - Sheldon Cooper </h3>
    </div>
    <div class="quote_image">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
    </div>
    <nav>
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-left_moebxn.png">
      <img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-right_oilpij.png">
    </nav>
  </div>
</body>

所以再一次，我的想法是我可以将.box类作为父容器，然后嵌套的.text_container可以在较小的视口中以响应的方式重新调整文本的大小。但它不是......我的头发变灰了。

... Errggghhhh

Answer 1

绝对位置的孩子不能改变大小或其父级，反之亦然。或者，您可以使用 float 属性并将其设置为＆＃34; right＆＃34;。此外，如果您的目标是响应式设计，则可能需要使用％而不是像素。

Answer 2

我猜你需要的是http://freqdec.github.io/slabText/
font-size无法调整窗口宽度的大小，除非您使用Media Queries

定义宽度不同的字体大小

响应文本大小调整容器内的问题

2 个答案: