- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- rendere un sito responsive
-
rendere un sito responsive
Salve a tutti,
spero di essere nella sezione giusta. Ho un problema e non essendo esperto, cerco consigli su come risolverlo.
Ho realizzato (sto realizzando ma è quasi finito) un sito in HTML e PHP. Il problema è che, a differenza di PC e portatile, non viene visualizzato correttamente sui dispositivi mobili; dovrei quindi adattarlo.:? Qualche consiglio in merito?? Grazie infinite a chi vorrà aiutarmi
Zorrino
-
Ciao,
potresti utilizzare il framework Bootstrap per rendere il suo sito responsive.
Inizia da qui https://getbootstrap.com/docs/4.3/layout/grid/#responsive-classes
Praticamente le classi col-* (es. col-2, col-3, col-4) servono a formare una sorta di griglia composta, ciascuna delle quali occupa circa 8,33% del totale (100% per 12 colonne).
col-4 occupa ad esempio 4 colonne e il 33,33% dello spazio totale, mentre col-8 il 66,66%
[HTML]
<div class="container">
<div class="row">
<div class="col-8">Otto colonne</div>
<div class="col-4">Quattro colonne</div>
</div>
</div>
[/HTML]Ovviamente puoi adattarlo in base alle tue esigenze. Inoltre ci sono numerosi componenti che puoi utilizzare (bottoni, alerts, popup, etc...) https://getbootstrap.com/docs/4.3/components/
Prima di poter utilizzare Bootstrap, devi includere i file CSS e JS nel codice HTML. Puoi usare una CDN https://getbootstrap.com/docs/4.3/getting-started/download/#bootstrapcdn
-
Ciao Flaviors, e grazie per la pronta risposta
ma lo devo reimpostare di nuovo (il sito è praticamente finito) o lo posso semplicemente 'trasformare' così com'è?? (sono completamente a digiuno su quest'argmento). GrazieZorrino
-
Ciao zorrino,
non so come è fatto il sito, posta il link che ci do un'occhiata.
Cmq si, dovresti sporcarti le mani e cambiare il codice dove serve
-
Ciao Flaviors e grazie per il tempo che mi stai dedicando.
Il link questo:http://chricol.altervista.org/GIOVANNI/SITO/resetta.php
Una volta finito lo vorrei togliere da Altervista. La fotogallery ancora non funziona.
Il sito è scritto in HTML con parti in PHP e jQuey. Ciao e ancora grazieZorrino
-
Ciao zorrino,
dato che il forum mi taglia tutta la parte dopo il primo snippet di codice, ti lascio il link alla mia risposta completa https://pastebin.com/v1YzZ6m2
-
Ciao Flaviors e scusa per ritardo,
ho letto la tua risposta e ho provato la tua soluzione ed, in effetti, restringendo la larghezza dello schermo anche i vari contenitori si adattano. Purtroppo, soprattutto verso il fondo, si accavalla un po' il testo; forse, come mi consigliavi, dovrei evitare lunghezze flisse (tu mi consigli quindi lunghezza in percentuale?). Proverò anche a cambiare le scritte in testo. Grazie comunque per il tuo aiutoZorrino
-
Ciao zorrino,
diciamo che se vuoi un layout responsive è consigliabile utilizzare misure in percentuale, altrimenti puoi usare quelle fisse ma devi utilizzare le media query e farti qualche calcolo.
Se ad esempio imposti un container a 960px per risoluzioni maggiori o uguali a 1024px, quando fai il resize a 480px ad esempio, dovresti ridurre la larghezza a 420px.
Dagli strumenti per sviluppatori di Chrome (o altro browser), premi Ctrl + Maiusc + C e poi Ctrl + Maiusc + M. Vedrai che si attiva la modalità responsive che ti consente di testare il layout del sito su vari dispositivi (laptop, tablet, mobile).