Nie wiem jak zrobić responsywną wielkość tekstu

pytanie zadane 16 czerwca 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)
zamknięte 16 czerwca 2020 przez Marak123

Chcę zrobić diva który się rozsuwa z wielkości width: 0px; height: 0px; do wielkości width: 500px; height: 100px; i chcę aby ze rozsuwającym się divem zwiększała się wielkość czcionki tylko jak daje tranzision na fonta to nie działa wie ktoś jak to zrobić?

komentarz zamknięcia: działa dzieki za pomoc

1 odpowiedź

odpowiedź 16 czerwca 2020 przez Comandeer Guru (601,550 p.)
wybrane 16 czerwca 2020 przez Marak123

Najlepsza

Dodając transition na fonta: https://jsfiddle.net/Comandeer/x0rm7ce2/

komentarz 16 czerwca 2020 przez Marak123 Stary wyjadacz (11,190 p.)

No tak tylko chcę w procentach fonta

komentarz 16 czerwca 2020 przez Comandeer Guru (601,550 p.)

Wciąż działa: https://jsfiddle.net/Comandeer/x0rm7ce2/1/

komentarz 16 czerwca 2020 przez Marak123 Stary wyjadacz (11,190 p.)

To co jest nie tak w tym kodzie ze nie działa

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<script>

	</script>
	<style>
        body{
            background: greenyellow;
            width: auto;
            height: auto;
        }
        .informacja_skroty{
            background: #E3E3E3;
            width: 15px;
            height: 15px;
            border-radius: 10px;
            font-weight: bold;
            border: 2px solid #0277BD;
            position: absolute;
            left: 50%;
            top: 10%;
        }
        .informacja_skroty:hover{
            background: #424242;
            cursor: pointer;
        }
        .informacja_skroty p{
            text-align: center;
            margin: 0px;
            position: absolute;
            left: 20%;
            top: 0%;
        }
        .info_2{
            width: 10%;
            height: 100%;
            background: white;
            position: absolute;
            left: 81%;
            top: -15%;
            transform: rotate(45deg);
        }
        .info_1{
            background: white;
            width: 0px;
            height: 0px;
            position: absolute;
            margin: 0px;
            top: 15%;
            right: 45%;
            border-radius: 5%;
            font-size: 2vmin;
            cursor: default;
            visibility: hidden;
            transition: all 500ms cubic-bezier(0, 0, 0.99, 0.99);
        }
        .info_1_klik{
            visibility: visible;
            width: 500px;
            height: 100px;
            opacity: 0.7;
        }
         .znak_info{
            position: absolute;
            opacity: 1;
            margin: 0;
            text-align: center;
            transition: all 500ms ease-in-out;       
        }
        .znak_info_klik{
            font-size: 100%;
        }
	</style>
</head>
<body>
	<div class="informacja_skroty">
		<p>?</p>
	</div>
	<div class="info_1">
		<div class="info_2"></div>
		<p class="znak_info">
			To jest informacja o pisaniu klawiturą w kalkulatorze cos tam dajeks pisze nie wiem co ale to tylko testy więc coś napisałem więc się nie dziwcie że może być źle jak widze to nie działa zawijanie wierszy
		</p>
	<div>
</body>
<script src="jquery-3.5.1.min.js"></script>
<script>
    var info_skroty = document.querySelector(".informacja_skroty");
    
    info_skroty.addEventListener("click", function(skroty){
        $(".info_1").toggleClass('info_1_klik');
        $(".znak_info").toggleClass('znak_info_klik');
    });
</script>
</html>

komentarz 16 czerwca 2020 przez Marak123 Stary wyjadacz (11,190 p.)

Dobra zrobiłem nie wiem czy da się inaczej pewnie się da ale dodałem do tej klasy początkowej fon-size: 0%; i do tej 2 klasy tranzision i zadziałało dzięki za pomoc!!