Как заставить текстовый слой сжиматься только после того, как до границы окна осталось не более 5%?

Question

Я застрял с этим, не могли бы вы помочь мне с проблемой изменения размера div? Как можно уменьшить текстовый слой только после того, как до границ окна осталось не более 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;
 }
}

Может быть, вы можете получить больше информации в условиях ширины касания и в медиазапросах, как правило, по следующей ссылке: https://www.w3schools.com/css/css_rwd_mediaqueries.asp Представляет собой введение.