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!!
CSS: sito responsive (breakpoint)... cosa inserire
- 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
"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."
-
- 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
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.
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
- 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
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...
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."
-
- 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
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.
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>
Chi c’è in linea
Visualizzano questa sezione: 0 utenti iscritti e 15 ospiti