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

Linguaggi di programmazione: php, perl, python, C, bash e tutti gli altri.
Avatar utente
linud-dk
Prode Principiante
Messaggi: 194
Iscrizione: venerdì 27 maggio 2016, 13:05
Desktop: unity
Distribuzione: Ubunu16DesktopXeniaXerus LTS [x64]
Sesso: Maschile
Località: Abruzzo

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

Messaggio da 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!!

:muro:

"Anche se l'interezza di questa vita non fosse altro che sogno e il mondo fisico un fantasma, io definirei questo sogno e questo fantasma abbastanza veri se, usando bene la ragione, non ne fossimo mai ingannati."
Dany_XIII
Prode Principiante
Messaggi: 135
Iscrizione: sabato 3 settembre 2011, 12:54
Desktop: KDE
Distribuzione: Kubuntu 21.10 x86_64
Sesso: Maschile
Località: ROMA

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

Messaggio da 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.
Avatar utente
linud-dk
Prode Principiante
Messaggi: 194
Iscrizione: venerdì 27 maggio 2016, 13:05
Desktop: unity
Distribuzione: Ubunu16DesktopXeniaXerus LTS [x64]
Sesso: Maschile
Località: Abruzzo

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

Messaggio da 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...

"Anche se l'interezza di questa vita non fosse altro che sogno e il mondo fisico un fantasma, io definirei questo sogno e questo fantasma abbastanza veri se, usando bene la ragione, non ne fossimo mai ingannati."
Dany_XIII
Prode Principiante
Messaggi: 135
Iscrizione: sabato 3 settembre 2011, 12:54
Desktop: KDE
Distribuzione: Kubuntu 21.10 x86_64
Sesso: Maschile
Località: ROMA

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

Messaggio da 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>
Scrivi risposta

Ritorna a “Programmazione”

Chi c’è in linea

Visualizzano questa sezione: 0 utenti iscritti e 8 ospiti