Jeżeli chcesz to "zaprogramować" mimo wszystko sam. Przy małych projektach, można się pokusić samemu zaprogramować responsywność na swojej stronie. Nie jest moim zamiarem negować bootstrap-a i jego zalet, ale z tego typu rozwiązaniami zawsze dostajemy "nadmiarowy" kod, ponieważ twórcy w tym wypadku bootstrap-a, musieli przewidzieć wszystkie możliwe sytuacje jakie mogą wystąpić w projekcie strony, których ty w swoim projekcie, możesz w ogóle nie wykorzystywać. Drugi powód, trywialny, żeby poćwiczyć i nabyć kolejne umiejętności. 
Pierwszy krok to w <head> strony musi się pojawić wpis meta o nazwie name="viewport", nie które właściwości (atrybuty) content muszą się pojawić, inne są zależne od Twojego projektu. Responsive Web Design - The Viewport, według Mnie te poniżej to minimum.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
tu viewport ze strony, którą podałeś za przykład:
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,minimal-ui">
przechodzimy do css-a strony, na początek Ja używam tzw. selektor uniwersalny [ 1 , 2 ] [ css-selektory ]
<style>
* {
padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
}
html {
font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
/* font-size: 14px; 14 pikseli = 1 rem itd. */
}
</style>
[ css - box-sizing ]
W przykładzie używam przeglądarki Brave [ silnik: Chromium web browser ]
Uruchamiamy przykładowy plik response.html (kod poniżej) wciskamy F12 i klikamy na ikone [ Toggle device toolbar ]
Uzyskujemy menu (panel?) za pomocą, którego możemy podglądać naszą stronę tak jakby był wyświetlana na urządzeniu mobilnym.
response.html [ wersja surowa ]
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<style>
* {
padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
}
html {
font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
/* font-size: 14px; 14 pikseli = 1 rem itd. */
}
header {
height: 100vh;
color: cornsilk;
background-color: darkslategrey;
}
</style>
</head>
<body>
<header>
<nav>
<i class="fa fa-bars" aria-hidden="true"></i>
</nav>
<hgroup>
<h1>Cała strona responsywnie zmniejsza się, przy zmniejszaniu szerokości płótna</h1>
<h3>Witam,<br>
jak osiągnąć efekt, aby podczas zmniejszania płótna strony w poziomie, zmniejszał
się ona również w pionie? Chodzi o zachowanie proporcji przy zajściu responsywności
</h3>
</hgroup>
<img src="pasja.png">
</header>
</body>
</html>
pasja.png
<style>
* {
padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
}
html {
font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
/* font-size: 14px; 14 pikseli = 1 rem itd. */
}
header {
height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
color: cornsilk;
background-color: darkslategrey;
font-family: 'MuseoModerno', cursive;
}
header nav {
position: absolute;
right: 1%;
top: 1%;
font-size: 3rem;
}
header hgroup {
position: absolute;
top: 5%;
left: 2%;
}
header h1 {
font-size: 3rem;
}
header h3 {
font-size: 2rem;
font-weight: 400;
}
header img {
position: absolute;
bottom: 0;
right: 0;
}
#arrow {
position: absolute;
width: 44px;
height: 44px;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
border: 2px solid white;
border-radius: 50%;
font-size: 4rem;
text-align: center;
}
main {
height: 100vh;
background-color: darkolivegreen;
}
</style>
[ @media ] [ @media (orientation: portrait / landscape ) ]
[ Responsive Web Design - Media Queries ]
<style>
* {
padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
}
html {
font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
/* font-size: 14px; 14 pikseli = 1 rem itd. */
}
header {
height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
color: cornsilk;
background-color: darkslategrey;
font-family: 'MuseoModerno', cursive;
}
header nav {
position: absolute;
right: 1%;
top: 1%;
font-size: 3rem;
cursor: pointer;
}
header hgroup {
position: absolute;
top: 8%;
left: 2%;
z-index: 1;
}
header h1 {
font-size: 3rem;
}
header h3 {
font-size: 2rem;
font-weight: 400;
}
header img {
position: absolute;
bottom: 0;
right: 0;
}
#arrow {
position: absolute;
width: 32px;
height: 32px;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
border: 2px solid white;
border-radius: 50%;
font-size: 2.35rem;
text-align: center;
cursor: pointer;
}
@media (orientation: portrait) {
h3 span::before {
content: '\A'; /* Wstaw Enter - podobne do <br> */
white-space: pre;
}
h3 span::after {
content: '\A';
white-space: pre;
}
#arrow {
left: 8%;
}
}
@media (orientation: landscape) {
h3 span::before {
content: '\A';
white-space: pre;
}
header h3 {
width: 75%;
}
header img {
width: 36%;
height: 50%;
}
}
@media (max-width: 360px) {
header h1 {
font-size: 2.2rem;
}
header h3 {
font-size: 1.85rem;
}
}
main {
height: 100vh;
background-color: darkolivegreen;
}
</style>
response.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;500;600&display=swap">
<style>
* {
padding: 0; /* wszystkie elementy strony margines wewnętrzny 0 pikseli */
margin: 0; /* wszystkie elementy strony margines zewnętrzny 0 pikseli */
box-sizing: border-box; /* www.w3schools.com/css/css3_box-sizing.asp */
}
html {
font-size: 10px; /* wielkość bazowa czcionki 10 pikseli = 1 rem */
/* font-size: 14px; 14 pikseli = 1 rem itd. */
}
header {
height: 100vh; /* 100% szerokości viewport [ ekranu urządzenia ] */
color: cornsilk;
background-color: darkslategrey;
font-family: 'MuseoModerno', cursive;
}
header nav {
position: absolute;
right: 1%;
top: 1%;
font-size: 3rem;
cursor: pointer;
}
header hgroup {
position: absolute;
top: 8%;
left: 2%;
z-index: 1;
}
header h1 {
font-size: 3rem;
}
header h3 {
font-size: 2rem;
font-weight: 400;
}
header img {
position: absolute;
bottom: 0;
right: 0;
}
#arrow {
position: absolute;
width: 32px;
height: 32px;
bottom: 1%;
left: 50%;
transform: translateX(-50%);
border: 2px solid white;
border-radius: 50%;
font-size: 2.35rem;
text-align: center;
cursor: pointer;
}
@media (orientation: portrait) {
h3 span::before {
content: '\A'; /* Wstaw Enter - podobne do <br> */
white-space: pre;
}
h3 span::after {
content: '\A';
white-space: pre;
}
#arrow {
left: 8%;
}
}
@media (orientation: landscape) {
h3 span::before {
content: '\A';
white-space: pre;
}
header h3 {
width: 75%;
}
header img {
width: 36%;
height: 50%;
}
}
@media (max-width: 360px) {
header h1 {
font-size: 2.2rem;
}
header h3 {
font-size: 1.85rem;
}
}
main {
height: 100vh;
background-color: darkolivegreen;
}
</style>
</head>
<body>
<header>
<nav>
<i class="fa fa-bars" aria-hidden="true"></i>
</nav>
<hgroup>
<h1>Cała strona responsywnie zmniejsza się, przy zmniejszaniu szerokości płótna</h1>
<h3><span>Witam,</span>
jak osiągnąć efekt, aby podczas zmniejszania płótna strony w poziomie, zmniejszał
się ona również w pionie? Chodzi o zachowanie proporcji przy zajściu responsywności
</h3>
</hgroup>
<img src="pasja.png">
<div id="arrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
</header>
<main>
<!-- reszta kodu strony -->
</main>
<script>
<!-- kod javascript -->
</script>
</body>
</html>
