How to make the HTML page adapt to the window size [closed]

Question

How to make the HTML page adapt to the window size [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Personal to with a doubt I see on websites how the stackoverflow itself adapt to window size how do I do this in an HTML code?

Do you resize a chrome window and fit the page without cropping the HTML elements?

html css

asked by anonymous 01.06.2018 / 17:24

2 answers

Problem with socket C Entity mapping with .Net Core 2

score 0 · Answer 1

I've done a basic and minimum example, I hope it helps you in your search. Here are some considerations:

1 - This topic is too broad to be discussed in just one example. You can get much more information and examples from a number of places like google and youtube , or of course doing some type of course regarding responsive and mobile-first .

2 - There are different ways to develop a responsive page like: Pure CSS (using Media Queries) , Pure CSS (using Flexbox + Media Queries) , CSS frameworks (Bootstrap, Materialize, Bulma, SemanticUI, Foundation, etc.)
3 - In my humble opinion , I would advise you first to learn the techniques with pure CSS, then use the frameworks and then know what they do behind the scenes .

4 - If you want to take a look at each way you can follow the links below: 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 All page to see the media result.

score 0 · Answer 2

Use the following tag at the top of your pages.

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

You will see the magic happening ... Use Semantic UI to help you with your page styling.

Semantic UI