如何让文字层仅在window边框留下不超过5%的情况下收缩？

Question

我被这个问题困住了，你能帮我解决 div 调整大小的问题吗？如何让文本层仅在 window 边框剩余不超过 5% 的情况下收缩？

代码片段下方：

    * {
     margin: 0;
     padding: 0;
    }
    
    html,
    body {
     height: 100%;
    }
    .wrapper {
     position: relative;
     min-height: 100%;
    }
    .content {
     padding-bottom: 90px;
     text-align:center;
     padding-top:10%;
    }
    .footer {
     left: 0;
     bottom: 0;
     width: 100%;
     height: 40px;
     
    }

    .content div { 
    width:36%;
    margin: 0 auto;
    text-align:justify;
    }

    <div class="wrapper">
     <div class="content">
     <div>
    
    Text text Text textText textText textText textText textText textText textText textText textText textText textText textText textText textText textText textText textText text</div>
     
     </div>
     <div class="footer">text text</div>
    </div>

Answer 1

如果你想建立一个条件，你必须使用媒体查询。例如

@media only screen and (max-width: 600px) {
.example {
max-width: 30px;
 }
}

也许您可以通过以下方式获得更多关于触摸宽度条件和媒体查询的信息link：https://www.w3schools.com/css/css_rwd_mediaqueries.asp 代表介绍。

如何让文字层仅在window边框留下不超过5%的情况下收缩？

How to make the text layer shrink only after no more than 5% is left to the window border?

html

css

resize