如何在div内使文本灵活？

Question

I want to make text change as its parent div size changes. With the parent div size changes, the text should adjust automatically.

What i want is to adjust the text in a widget, when the widget size increase or decrease.

Right now i'm handling this with @media queries:

@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

Fiddle : https://jsfiddle.net/raskarvishal7/z8kdrqw7/

try this..

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

Assuming you mean adjust the font-size when you say "adjust the text" then you're doing it properly. This is exactly why media queries exist.

You could do it with javascript but I would not recommend it.