How to make the HTML page fit the window size

Asked

Viewed 3,003 times

1

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?

html css
  • 5

    Search by responsiveness.

  • This happens because the "Responsive" standard is used. Site or responsive layout, or also known as flexible site is when the site automatically fits into the user’s device. See this link w3schools Responsive Design

  • I think you should seek to learn responsiveness to building Responsive Sites (responsive websites are those that adapt the size of your pages according to the screen on which it is being displayed). I don’t know many web things, however it would be a good start to learn about using the framework Bootstrap and so on. I think it would be a good idea to take a course of [Bootstrap](https://www.devmedi

2 answers

0

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.

0

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.