Layout statico
Il layout statico o fisso è caratterizzato da grandezze fisse, espresse in pixel, che non variano a seconda della dimensione della finestra del browser su cui è visualizzata la pagina. Una variante è il layout elastico, in cui le grandezze sono espresse in em ma anche questo è ormai obsoleto.
Il layout statico è chiaramente una opzione da non prendere in considerazione.
<header>
<h1>ESEMPIO LAYOUT STATICO</h1>
</header>
<nav>
<ul>
<li> <a href="#" title="Primo link del menu">Primo link</a>
<ul>
<li> <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li> <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Secondo link del menu">Secondo link</a>
<ul>
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Terzo link">Terzo link</a>
<ul >
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li > <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<h1>TITOLO DEL PRIMO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 1" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL SECONDO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 2" style="float: left;">Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</article>
<article>
<h1>TITOLO DEL TERZO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 3" style="float: left;"> Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
<article>
<h1>TITOLO DEL QUARTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 4" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL QUINTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 5" style="float: left;"> Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;. </p>
</article>
<article>
<h1>TITOLO DEL SESTO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 6" style="float: left;">Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
</section>
<aside>
<h2>TITOLO DELL'ASIDE</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
<p>Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
</aside>
<footer>
<div>
<h3>SITEMAP</h3>
<ul>
<li><a href="#">Primo link</a></li>
<li><a href="#">Secondo link</a></li>
<li><a href="#">Terzo link</a></li>
<li><a href="#">Quarto link</a></li>
<li><a href="#">Quinto link</a></li>
</ul>
</div>
<div>
<h3>SOCIAL</h3>
<p>Seguici su <a href="#">Facebook</a></p>
<p>Seguici su <a href="#">Twitter</a></p>
<p>Seguici su <a href="#">Instagram</a></p>
</div>
<div>
<h3>CONTATTI</h3>
<p>Mario Rossi</p>
<p>via Roma 1</p>
<p>10100 Torino</p>
<small>P. IVA 00000000000</small> </div>
</footer>
/*assegno le larghezze fisse e i margin laterali ai vari elementi*/
/*facendo la somma delle width e dei margin dei vari elementi ottengo la larghezza del body*/
body {
width: 960px;
margin: auto;
}
nav {
width: 200px;
margin-right: 40px;
}
aside {
width: 160px;
margin-left: 60px;
}
section {
width: 500px;
}
footer > div {
width: 300px;
}
footer > div:nth-child(2) {
margin-right: 30px;
margin-left: 30px;
}
/*assegno la proprietà float agli elementi che voglio siano affiancati*/
nav, aside, section {
float: left;
}
footer {
clear: both;
}
footer > div {
float: left;
}
/*assegno dei margin top e bottom per distanziare gli elementi*/
header {
margin-top: 20px;
}
header, nav, section {
margin-bottom: 30px;
}
article, footer {
margin-bottom: 20px;
}
/*assegno dei padding e dei margin per distanziare gli elementi dai bordi*/
h1, h2, h3, li, p, small {
padding: 10px;
}
img {
margin-right: 10px;
}
/*assegno un'altezza agli article alle colonne del footer in modo che siano tutti uguali*/
article {
height: 220px;
}
footer > div {
height: 240px;
}
/*assegno un'altezza al footer che l'ha persa quando ho assegnato la proprietà float ai div in esso contenuti*/
footer {
height: 240px;
}
/*assegno dei colori di sfondo agli elementi in modo da renderli facilmente riconoscibili*/
header {
background-color: #FCF;
}
nav {
background-color: #CCF;
}
article {
background-color: #9F9;
}
aside {
background-color: #FC9;
}
footer div {
background-color: #9CC;
}
a {
text-decoration: none;
color: inherit;
}
// no js
Layout fluido
Il layout fluido o liquido è caratterizzato da grandezze espresse in percentuali riferite all'elemento contenitore. Nel caso del <body> una larghezza del 100% indica che l'elemento si deve espandere per tutto lo spazio disponibile.
Questa soluzione rende il contenuto sempre visibile qualunque sia la grandezza della finestra del browser ma quando quest'ultima è molto piccola, come in cellulare, la lettura diventa difficile perciò anche il layout fluido non è da prendere in considerazione.
<head>
<title>Layout fluido</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>ESEMPIO LAYOUT FLUIDO</h1>
</header>
<nav>
<ul>
<li> <a href="#" title="Primo link del menu">Primo link</a>
<ul>
<li> <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li> <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Secondo link del menu">Secondo link</a>
<ul>
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Terzo link">Terzo link</a>
<ul >
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li > <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<h1>TITOLO DEL PRIMO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 1" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL SECONDO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 2" style="float: left;">Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</article>
<article>
<h1>TITOLO DEL TERZO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 3" style="float: left;"> Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
<article>
<h1>TITOLO DEL QUARTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 4" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL QUINTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 5" style="float: left;"> Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;. </p>
</article>
<article>
<h1>TITOLO DEL SESTO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 6" style="float: left;">Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
</section>
<aside>
<h2>TITOLO DELL'ASIDE</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
<p>Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
</aside>
<footer>
<div>
<h3>SITEMAP</h3>
<ul>
<li><a href="#">Primo link</a></li>
<li><a href="#">Secondo link</a></li>
<li><a href="#">Terzo link</a></li>
<li><a href="#">Quarto link</a></li>
<li><a href="#">Quinto link</a></li>
</ul>
</div>
<div>
<h3>SOCIAL</h3>
<p>Seguici su <a href="#">Facebook</a></p>
<p>Seguici su <a href="#">Twitter</a></p>
<p>Seguici su <a href="#">Instagram</a></p>
</div>
<div>
<h3>CONTATTI</h3>
<p>Mario Rossi</p>
<p>via Roma 1</p>
<p>10100 Torino</p>
<small>P. IVA 00000000000</small> </div>
</footer>
</body>
/*assegno le larghezze e i margin laterali in percentuale ai vari elementi*/
/*facendo la somma delle percentuali dei vari elementi ottengo la larghezza del body ovvero il 100%*/
body {
width: 100%;
}
nav {
width: 20%;
margin-right: 5%;
}
aside {
width: 20%;
margin-left: 5%;
}
section {
width: 50%;
}
footer > div {
width: 30%;
}
footer > div:nth-child(2) {
margin-right: 5%;
margin-left: 5%;
}
/*assegno la proprietà float agli elementi che voglio siano affiancati*/
nav, aside, section {
float: left;
}
footer {
clear: both;
}
footer > div {
float: left;
}
/*assegno dei margin top e bottom per distanziare gli elementi, per le altezze uso i rem*/
header {
margin-top: 0.6rem;
}
header, nav, section {
margin-bottom: 0.8rem;
}
article, footer {
margin-bottom: 0.6rem;
}
/*assegno dei padding e dei margin per distanziare gli elementi dai bordi*/
h1, h2, h3, li, p, small {
padding: 0.6rem;
}
img {
margin-right: 0.6rem;
}
/*non ha senso assegnare un'altezza agli article e alle colonne del footer in modo che siano tutti uguali perchè la loro altezza aumenterà al restringersi della finestra del browser e viceversa.*/
/*perciò imposto un'altezza minima e poi lascio libero l'elemento di allungarsi per contenere il contenuto*/
article {
min-height: 220px;
}
footer > div {
min-height: 240px;
}
/*assegno un'altezza al footer che l'ha persa quando ho assegnato la proprietà float ai div in esso contenuti*/
footer {
min-height: 240px;
}
/*assegno dei colori di sfondo agli elementi in modo da renderli facilmente riconoscibili*/
header {
background-color: #FCF;
}
nav {
background-color: #CCF;
}
article {
background-color: #9F9;
}
aside {
background-color: #FC9;
}
footer div {
background-color: #9CC;
}
a {
text-decoration: none;
color: inherit;
}
// no js
Layout adaptive
Il layout adaptive può essere considerato come una diversa variante dello stesso layout per diverse grandezze dello schermo, definite dalle media queries.
Poichè sarebbe impossibile studiare un diverso layout per ogni grandezza dello schermo possibile anche il layout adaptive non è la soluzione migliore.
<head>
<title>Layout adaptive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>ESEMPIO LAYOUT ADAPTIVE</h1>
</header>
<nav>
<ul>
<li> <a href="#" title="Primo link del menu">Primo link</a>
<ul>
<li> <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li> <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Secondo link del menu">Secondo link</a>
<ul>
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Terzo link">Terzo link</a>
<ul >
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li > <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<h1>TITOLO DEL PRIMO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 1" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL SECONDO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 2" style="float: left;">Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</article>
<article>
<h1>TITOLO DEL TERZO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 3" style="float: left;"> Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
<article>
<h1>TITOLO DEL QUARTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 4" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL QUINTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 5" style="float: left;"> Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;. </p>
</article>
<article>
<h1>TITOLO DEL SESTO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 6" style="float: left;">Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
</section>
<aside>
<h2>TITOLO DELL'ASIDE</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
<p>Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
</aside>
<footer>
<div>
<h3>SITEMAP</h3>
<ul>
<li><a href="#">Primo link</a></li>
<li><a href="#">Secondo link</a></li>
<li><a href="#">Terzo link</a></li>
<li><a href="#">Quarto link</a></li>
<li><a href="#">Quinto link</a></li>
</ul>
</div>
<div>
<h3>SOCIAL</h3>
<p>Seguici su <a href="#">Facebook</a></p>
<p>Seguici su <a href="#">Twitter</a></p>
<p>Seguici su <a href="#">Instagram</a></p>
</div>
<div>
<h3>CONTATTI</h3>
<p>Mario Rossi</p>
<p>via Roma 1</p>
<p>10100 Torino</p>
<small>P. IVA 00000000000</small> </div>
</footer>
</body>
/*assegno le stesse proprietà che ho usato per il layout statico, sapendo che la pagina si vedrà bene su schermi da 960px in su*/
body {
width: 960px;
margin: auto;
}
nav {
width: 200px;
margin-right: 40px;
}
aside {
width: 160px;
margin-left: 60px;
}
section {
width: 500px;
}
footer > div {
width: 300px;
}
footer > div:nth-child(2) {
margin-right: 30px;
margin-left: 30px;
}
nav, aside, section {
float: left;
}
footer {
clear: both;
}
footer > div {
float: left;
}
header {
margin-top: 20px;
}
header, nav, section {
margin-bottom: 30px;
}
article, footer {
margin-bottom: 20px;
}
h1, h2, h3, li, p, small {
padding: 10px;
}
img {
margin-right: 10px;
}
article {
height: 220px;
}
footer > div {
height: 240px;
}
footer {
height: 240px;
}
header {
background-color: #FCF;
}
nav {
background-color: #CCF;
}
article {
background-color: #9F9;
}
aside {
background-color: #FC9;
}
footer div {
background-color: #9CC;
}
a {
text-decoration: none;
color: inherit;
}
/*ora restringo la finestra del browser a 768 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 768px) {
body {
width: 768px;
}
nav {
float: none;
width: 768px;
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li {
position: relative;
}
nav > ul > li:nth-child(1) > ul {
position: absolute;
left: 130px;
top: 0;
color: #F66;
}
nav > ul > li:nth-child(2) > ul {
position: absolute;
left: 130px;
top: -80%;
color: #FC3;
}
nav > ul > li:nth-child(3) > ul {
position: absolute;
left: 130px;
bottom: 0;
color: #C3C;
}
footer > div {
width: 230px;
}
footer > div:nth-child(2) {
margin-right: 13px;
margin-left: 13px;
}
}
/*ora restringo la finestra del browser a 480 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 480px) {
body {
width: 480px;
}
nav {
width: 480px;
}
section {
width: 480px;
float: none;
}
aside {
float: none;
width: 480px;
margin-left: 0;
margin-bottom: 20px;
}
footer > div {
width: 140px;
}
footer > div:nth-child(2) {
margin-right: 10px;
margin-left: 10px;
}
/*ora restringo la finestra del browser a 320 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 320px) {
body {
width: 320px;
}
nav {
width:320px;
}
nav > ul > li:nth-child(1) > ul {
left: 100px;
}
nav > ul > li:nth-child(2) > ul {
left: 100px;
}
nav > ul > li:nth-child(3) > ul {
left: 100px;
}
section {
width: 320px;
}
article {
padding-bottom: 80px;
}
aside {
width:320px;
}
footer > div {
float:none;
width: 320px;
margin-bottom: 20px;
}
footer > div:nth-child(2) {
margin-right:0;
margin-left: 0;
}
}
// no js
Layout responsive
Il layout responsive combina le grandezze in percentuale con le media queries permettendo di avere diversi layout per diverse grandezze dello schermo ma rendendo graduale la transizione.
<head>
<title>Layout responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>ESEMPIO LAYOUT RESPONSIVE</h1>
</header>
<nav>
<ul>
<li> <a href="#" title="Primo link del menu">Primo link</a>
<ul>
<li> <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li> <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Secondo link del menu">Secondo link</a>
<ul>
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Terzo link">Terzo link</a>
<ul >
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li > <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<h1>TITOLO DEL PRIMO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 1" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL SECONDO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 2" style="float: left;">Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</article>
<article>
<h1>TITOLO DEL TERZO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 3" style="float: left;"> Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
<article>
<h1>TITOLO DEL QUARTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 4" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL QUINTO ARTICOLO</h1>
<p><img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 5" style="float: left;"> Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;. </p>
</article>
<article>
<h1>TITOLO DEL SESTO ARTICOLO</h1>
<p> <img src="https://placecats.com/150/150" width="150" height="150" alt="immagine 6" style="float: left;">Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
</section>
<aside>
<h2>TITOLO DELL'ASIDE</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
<p>Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
</aside>
<footer>
<div>
<h3>SITEMAP</h3>
<ul>
<li><a href="#">Primo link</a></li>
<li><a href="#">Secondo link</a></li>
<li><a href="#">Terzo link</a></li>
<li><a href="#">Quarto link</a></li>
<li><a href="#">Quinto link</a></li>
</ul>
</div>
<div>
<h3>SOCIAL</h3>
<p>Seguici su <a href="#">Facebook</a></p>
<p>Seguici su <a href="#">Twitter</a></p>
<p>Seguici su <a href="#">Instagram</a></p>
</div>
<div>
<h3>CONTATTI</h3>
<p>Mario Rossi</p>
<p>via Roma 1</p>
<p>10100 Torino</p>
<small>P. IVA 00000000000</small> </div>
</footer>
</body>
/*imposto, per comodità, le dimensioni in percentuale riferite ad uno schermo di 1000 pixel*/
body {
width: 100%;
max-width: 1000px;
margin: auto;
}
nav {
width: 20%;
margin-right: 7%;
}
aside {
width: 16%;
margin-left: 7%;
}
section {
width: 50%;
}
footer > div {
width: 30%;
}
footer > div:nth-child(2) {
margin-right: 5%;
margin-left: 5%;
}
nav, aside, section {
float: left;
}
footer {
clear: both;
}
footer > div {
float: left;
}
header {
margin-top: 1rem;
}
header, nav, section {
margin-bottom: 2rem;
}
article, footer {
margin-bottom: 1rem;
}
h1, h2, h3, li, p, small {
padding: 0.5rem;
}
img {
margin-right: 3%;
}
article {
min-height: 13rem;
}
footer > div {
height: 12rem;
}
footer {
height: 12rem;
}
header {
background-color: #FCF;
}
nav {
background-color: #CCF;
}
article {
background-color: #9F9;
}
aside {
background-color: #FC9;
}
footer div {
background-color: #9CC;
}
a {
text-decoration: none;
color: inherit;
}
/*rendo flessibili le immagini assegnando loro una max-width corrispondente alla loro dimensione originale e lasciandole libere di rimpicciolirsi*/
img {
max-width: 100%;
height: auto;
}
/*ora restringo la finestra del browser a 768 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 768px) {
nav {
float: none;
width: 100%;
max-width: 768px;
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li {
position: relative;
}
nav > ul > li:nth-child(1) > ul {
position: absolute;
left: 130px;
top: 0;
color: #F66;
}
nav > ul > li:nth-child(2) > ul {
position: absolute;
left: 130px;
top: -80%;
color: #FC3;
}
nav > ul > li:nth-child(3) > ul {
position: absolute;
left: 130px;
bottom: 0;
color: #C3C;
}
section {
width: 60%;
}
aside {
width: 30%;
margin-left: 10%;
}
/*ora restringo la finestra del browser a 480 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 480px) {
aside {
float:none;
width:100%;
clear:both;
margin-left: 0;
margin-bottom:2rem;
}
section {
width:100%;
}
}
/*ora restringo la finestra del browser a 360 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 360px) {
footer > div {
float: none;
width: 360px;
margin-bottom: 1rem;
}
footer > div:nth-child(2) {
margin-right: 0;
margin-left: 0;
}
}
// no js
Tutte le soluzioni sopra indicate prevedono che il markup resti sempre lo stesso mentre a cambiare sono solo i fogli di stile. Esiste anche la possibilità di servire all'utente una pagina diversa, anche nel markup, a seconda del dispositivo da cui sta navigando (Dynamic Serving) o addirittura di reindirizzarlo verso un diverso sito ottimizzato per quel dispositivo.