How to make the HTML page fit the window size

Question

Personal to with a question I see on sites how the stackoverflow itself adapt to the size of the window as I do it in an HTML code?

You resize a Chrome window and the page adapts without cutting the HTML elements?

Answer 1

I made an example basic and minimum, I hope it helps you in your search. It also follows some considerations:

1- This theme is too broad to be discussed in just one example. You can get much more information and examples in various locations like google and youtube, or of course take some kind of course regarding development techniques responsive and mobile-first.

2- There are different ways to develop a responsive page such as: Pure CSS (using Media Queries), Pure CSS (using Flexbox + Media Queries), CSS Frameworks (Bootstrap, Materialize, Bulma, Semanticui, Foundation, etc...).

3- In my humble opinion, would advise you to first learn the techniques with pure CSS, then employ the frameworks and so know what they do behind the scenes.

4- If you want to go taking a look at each way you can follow the following links: MEDIA QUERIES - Developer Mozilla, w3schools, chiefofdesign. FLEXBOX - Developer Mozilla, w3schools, css-Tricks. FRAMEWORKS - bootstrap, materialize, Bulma, semantic-ui, Foundation.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;	
}
html {
	font-family: "helvetica neue", sans serif;
}
.nav {
	border-bottom: solid 1px #eaeaeb;
	text-align: right;
	height: 70px;
	line-height: 70px;
}
.menu {
	margin: 0 30px 0 0;
}
.menu a {
	clear: right;
	text-decoration: none;
	color: grey;
	padding: 15px 15px 15px 15px;
	margin: 0 10px;
	line-height: 70px;
}
.menu a:hover {
	background-color: #888;
	color: #fff;
}
label {
	margin: 0 40px 0 0;
	font-size: 26px;
	line-height: 70px;
	display: none;
	width: 26px;
	float: right;
}
#toggle {
	display: none;
}

@media only screen and (max-width: 700px) {
	label {
		display: block;
		cursor: pointer;
	}
	.menu {
		text-align: center;
		width: 100%;
		display: none;
    position: static;
	}
	.menu a {
		display: block;
		border-bottom: solid 1px #eaeaeb;
		margin: 0;
		padding: 0;
	}
	.menu a:hover {
		color:#fff;
		background-color: #888;
	}

	#toggle:checked + .menu {
		display: block;
	}
}

<div class="nav">
	<label for="toggle">&#9776;</label>
	<input type="checkbox" id="toggle">
	<div class="menu">
                 <a href="#">Home</a>
		 <a href="#">Servi&ccedil;os</a>
		 <a href="#">Sobre</a>
		 <a href="#">Contato</a>
	</div>
</div>

Obs: Click on Whole page to see the result of media querie.

Answer 2

Use the following tag on the Head of your pages.

<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale=1.0">

You’ll see the magic happen... Use Semantic UI to help you with your page styling.

Semantic UI