Question

我希望在父div大小更改时进行文本更改。随着父div大小的改变，文本应自动调整。

我想要的是在窗口小部件大小增加或减少时调整窗口小部件中的文本。

现在我正在用@media查询来处理这个问题：

@media (min-width: 768px)  and (max-width: 1440px)  {
  .widget-header-title{
    background-color:white;
    border-bottom:1px solid #F0EEF0  !important;
    font-weight:200;
    font-size:22px;
    color:black;
    text-align:center;
  }
  /*For time widget Only*/
  .ticketSummaryTime {
    font-weight: bold !important;
    font-size: 165px !important;
    text-align: center !important;
  }
  /*For time widget Only*/
  .ticketSummary {
    font-weight: bold;
    font-size: 180px;
    text-align: center;
    margin-top: 75px;
  }
  .widget-bottom-status{
    font-weight:200;
    padding:5px;
    margin-top:30px;
    font-size:12px;
    color:grey;
    text-align:center;
    border-top:1px solid #F0EEF0 ;
  }
}

Answer 1

小提琴：https://jsfiddle.net/raskarvishal7/z8kdrqw7/

试试这个..

HTML：

<div class="wrapper">
  <div class="leftimg">
    <span>I am an image</span>
  </div>
  <div class="rightside">
    <div class="project-title">
      <h1>I Am Main Title</h1>
      <h2>Sub title<h2>
        </div>
        <div class="context">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</div>

CSS：

.wrapper {
  /* position: absolute; <-- You probably do not need this... */
  max-width: 1200px;
  width: 100%;
  margin-left: 10px;
  background: #3c3c3c;
  overflow: auto;  /* If you want the background color to show under all the image */
}
.leftimg {
  width: 300px;
  height: 600px;
  background: #8cceff;
  float: left;
}
.rightside {
  background: #F96;
  overflow: auto;
}
.project-title {
  font-family: 'Abel';
  color: #FFF;
  margin-left: 40px;
  font-weight: 300;
}
.project-title h1 {
  font-size: 2.5rem;
}
.project-title h2 {
  font-size: 1.4em;
}
.context {
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0 40px;
}
.context p {
  font-size: 1.06rem;
  line-height: 1.6rem;
  font-family: 'Roboto Condensed';
  font-weight: 300;
}

Answer 2

假设你的意思是在你说＆＃34;调整文字时调整字体大小＆＃34;然后你正确地做了。这正是媒体查询存在的原因。

您可以使用javascript进行此操作，但我不建议使用它。

如何在div内部使文本灵活？

2 个答案: