div内でテキストを柔軟にするには？

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

フィドル：

<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：

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

をこの..

HTMLを試してみてください

.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

あなたが「テキストを調整する」と言ったときにフォントサイズを調整するとしたら、それを正しく実行していることを意味します。これはまさにメディアクエリが存在する理由です。

あなたはでしたこれはjavascriptで行いますが、お勧めできません。