如何使div内的文本灵活？答案

【问题标题】：How to make text flexible inside div?如何使div内的文本灵活？
【发布时间】：2017-01-11 07:14:17
【问题描述】：

我想在其父 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 ;
  }
}

【问题讨论】：

使用媒体查询有什么问题？
除了媒体查询之外，这在 CSS 中是不可能的。对此有 JS 插件。
媒体查询的问题，它仅适用于媒体屏幕。如果用户只是为不同的屏幕更改小部件的宽度怎么办。我需要一些 JS 插件。
您可能想查看marcj.github.io/css-element-queries，页面上有一个“响应式小部件”演示，可能正是您想要的？

标签： javascript jquery html css frontend

【解决方案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;
}

【讨论】：

谢谢，但是当我更改您的代码屏幕时，它不起作用文本保持不变。

【解决方案2】：

假设您在说“调整文本”时是指调整字体大小，那么您做得正确。这正是存在媒体查询的原因。

你可以用 javascript 来做，但我不推荐它。

【讨论】：