CSS: sito responsive (breakpoint)... cosa inserire

linud-dk

Salve a tutti,
sto per realizzare per la prima volta una pagina responsive ma senza l'aiuto dei framework (come bootstrap e compagnia bella...) e sto inserendo i breakpoint (

@media (min-device-width : 320px) and (max-device-width : 480px) {
/* Smartphone */
}

@media (min-device-width : 768px) and (max-device-width : 1024px) {
/* Tablet */
}</div>

l'ho inseriti nella pagina del .css
Ma dentro questi breakpoint che devo inserire?!
Nella pagina .html invece ho già provveduto a mettere il comando

<meta name="viewport" content="width=device-width" >

per il ridimensionamento della pagina!

Fatemi sapere, grazie!!

Dany_XIII

Ciao,
All' interno delle direttive @media devi inserire le direttive che vuoi entrino in funzione una volta attivato quel trigger.

Esempio base:

default ---> font-size : 30px ( di base, senza che venga attivato alcun trigger il sito utilizzerà il carattere da 30px per la classe selezionata)

@media PER TABLET ---> font-size: 20px (se la dimensione dello schermo scende sotto il numero dei px che hai impostato come max ma non sotto il min il sito utilizzerà caratteri da 20px per la classe selezionata)

@media PER SMARTPHONE ---> font-size: 10px ( se la dimensione dello schermo è inferiore a quella impostata come minima per i tablet allora entrerà in funzione questa direttiva che imposterà la dimensione dei caratter a 10px)

Spero di essermi spiegato, se non è chiaro posso anche buttarti giù un codice funzionante.
Poi, perchè non stai utilizzando un Framework? c'è ne sono per tutti i gusti, ti rendono la vita 100 volte più semplice ed in più puoi sempre modificarli a tuo piacimento inserendo direttive in un custom.css . Pensaci.

linud-dk

io vorrei visualizzare dei div diversamente a seconda della risoluzione ( e quindi se si tratta di uno smartphone o tablet...)
Devo inserire la definizione della classe dei div o che altro?!
Perché attualmente alcuni div sono definiti oltre che con le classi con gli style...

Dany_XIII

Ti ho buttato giù una cosetta al volo, copiala in un file .html e lanciala nel tuo browser, poi prova a ridurre e ingrandire la finestra per vedere come i vari div vengono mostrati/nascosti.
L' ho fatto al volo ma dovrebbe andare, fammi sapere.

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
	<head>
		<style>
			@media (min-width : 4000px) {
				/*CINEMA*/
			  .tablet {
			      display: none;
			  }
			  .smartphone {
			      display: none;
			  }
			  .desktop {
			      display: none;
			  }
			}
			@media (min-width : 1024px) and (max-width: 4000px) {
				/*DESKTOP*/
			  .tablet {
			      display: none;
			  }
			  .smartphone {
			      display: none;
			  }
			  .cinema {
			      display: none;
			  }
			}
			@media (min-width : 800px) and (max-width: 1024px) {
				/*TABLET*/
			  .smartphone {
			      display: none;
			  }
			  .desktop {
			      display: none;
			  }
			  .cinema {
			      display: none;
			  }
			}
			@media (min-width : 0px) and (max-width: 800px) {
				/*SMARTPHONE*/
			  .tablet {
			      display: none;
			  }
			  .desktop {
			      display: none;
			  }
			  .cinema {
			      display: none;
			  }
			}
		</style>
	</head>
	<body>
		<div class="desktop">Questo dispositivo è un DESKTOP (1024 -> 4000 px)! </div>

		<div class="tablet"> Questo dispositivo è un TABLET (800 -> 1024 px) !  </div>

		<div class="smartphone"> Questo dispositivo è uno SMARTPHONE (0 -> 800 px) !  </div>

		<div class="cinema"> Questo dispositivo è un CINEMA (4000+ px) !  </div>
	</body>
</html>

Forum Ubuntu-it