Realizzazione siti web responsive con css e html

Gianluca Gradin

Nuovo Utente
17 Set 2014
2
0
0
Buongiorno vi volevo chiedere un paio di cose sulla realizzazione di siti web responsive.
Visitate il sito www.digital-vision.it l'ho realizzato con css e html.
Vedendolo su uno smartphone lo vedo ancora largo e per vedere i caratteri occorre ingrandire.
Avete dei consigli? Bisogna fare un sito diverso in riferimento al dispositivo?
 

Soulfearor

Utente Attivo
16 Set 2014
53
0
6
Torino
www.serenagraficatorino.it
Cosa intendi scusa? io l'ho vedo bene. Quando faccio i siti in responsive (ovvero tutti) li programmo inizialmente a schermo da pc e poi uso le varie media query per toccare tutti gli attributi delle classi che devono cambiare.

Te lo racchiudo nel tag HTML anche se è codice CSS
HTML:
@media (min-width: 400px) {
     .divnome {font-size:8px;}
}

@media (min-width: 539px) {
     .divnome {font-size:9px;}
}

@media (min-width: 768px) {
     .divnome {font-size:10px;}
}

@media (min-width: 992px) {
     .divnome {font-size:11px;}
}

@media (min-width: 1200px) {
     .divnome {font-size:12px;}
}

Ciao!
 
Ultima modifica di un moderatore:

Gianluca Gradin

Nuovo Utente
17 Set 2014
2
0
0
Cosa intendi scusa? io l'ho vedo bene. Quando faccio i siti in responsive (ovvero tutti) li programmo inizialmente a schermo da pc e poi uso le varie media query per toccare tutti gli attributi delle classi che devono cambiare.

Te lo racchiudo nel tag HTML anche se è codice CSS
HTML:
@media (min-width: 400px) {
     .divnome {font-size:8px;}
}

@media (min-width: 539px) {
     .divnome {font-size:9px;}
}

@media (min-width: 768px) {
     .divnome {font-size:10px;}
}

@media (min-width: 992px) {
     .divnome {font-size:11px;}
}

@media (min-width: 1200px) {
     .divnome {font-size:12px;}
}

Ciao!


Si lo so' che si vede però un cliente mi ha fatto notare su smartphone che visitando il sito web bisogna zoomare per leggere. In pratica i div del sito dovrebbero allargarsi e quindi anche i font ma non in riferimento alla risoluzione (molti smartphone hanno risoluzioni elevate, ma essendo lo schermo piccolo per forza di cose i font non si leggono) ma al dispositivo proprio. Quindi un div largo magari senza immagine o con immagine + grande e i font ad una grandezza leggibile su quel dispositivo. Con i @media si puo' fare? Esiste una guida on line??
 

Soulfearor

Utente Attivo
16 Set 2014
53
0
6
Torino
www.serenagraficatorino.it
Si lo so' che si vede però un cliente mi ha fatto notare su smartphone che visitando il sito web bisogna zoomare per leggere. In pratica i div del sito dovrebbero allargarsi e quindi anche i font ma non in riferimento alla risoluzione (molti smartphone hanno risoluzioni elevate, ma essendo lo schermo piccolo per forza di cose i font non si leggono) ma al dispositivo proprio. Quindi un div largo magari senza immagine o con immagine + grande e i font ad una grandezza leggibile su quel dispositivo. Con i @media si puo' fare? Esiste una guida on line??
Beh se il cellulare ha schermo piccolo si può fare ben poco, di solito le larghezze che ho usato sopra per le media query sono quelle standard ma se ti fai dire la risoluzione puoi crearne un'altra apposita per quel dispositivo.

In ogni caso devi seguire l'esempio che ti ho fatto sopra.

es: se hai 2 div affiancati
Codice:
<div class="col1"></div>
<div class="col2"></div>
e a risoluzione da monitor sono affiancati perchè hanno una larghezza del 50% entrambi, tu nella risoluzione da cellulare puoi aumentare quella larghezza a 100% e mandarli a capo, in questo modo ingrandirai anche le scritte agendo su di esse.
Per quanto riguarda le immagini se non sono indispensabili fai la stessa cosa facendole passare da display:block; a display:none; applicando il cambiamento al div che le contiene.

Codice:
.col1 {
   display:block;
   float:left;
   width:100%;
   font-size:14px;
}

.col 2 {
   display:block;
   float:left;
   width:100%;
   font-size:14px;
}

@media (min-width: 768px) {
   .col1 {
      width:50%;
      font-size:12px;
   }

   .col 2 {
      width:50%;
      font-size:12px;
   }
}

Con questo esempio ci sarà un cambiamento quando la risoluzione supera i 768px rispetto a quando non li supera.

p.s. le media query le ho imparate usando questo framework http://getbootstrap.com/

Ciao :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
E [Offro] Realizzazione di siti web e ottimizzazione SEO per raggiungere il primo posto su Google Offerte e Richieste di Lavoro e/o Collaborazione 0
P [OFFRO] Realizzazione siti web in PHP/MYSQL, responsive e Ottimizzati SEO Offerte e Richieste di Lavoro e/o Collaborazione 0
G [VENDO] Realizzazione Siti Web *Sconti Natale* Offerte e Richieste di Lavoro e/o Collaborazione 0
jonnino2004 cerco socio per realizzazione siti-web Offerte e Richieste di Lavoro e/o Collaborazione 7
T [OFFRO] Realizzazione Siti Web / SEO / Negozio Online / Social a partire da 50€ Offerte e Richieste di Lavoro e/o Collaborazione 1
webseocreative [OFFRO] Realizzazione siti web - Web Seo Creative (WSC) Offerte e Richieste di Lavoro e/o Collaborazione 2
F [OFFRO - VENDO] Realizzazione SITI WEB statici responsive e non a prezzi imbattibili Offerte e Richieste di Lavoro e/o Collaborazione 0
R [OFFRO] Realizzazione siti web statici e dinamici con posizionamento su Google e Social Network Offerte e Richieste di Lavoro e/o Collaborazione 0
R [OFFRO] Realizzazione siti web aziendali / ecommerce Offerte e Richieste di Lavoro e/o Collaborazione 0
R [OFFRO] Realizzazione Siti Web Responsive Offerte e Richieste di Lavoro e/o Collaborazione 0
B [vendo] BepperacWEB: Realizzazione siti web responsive, ottimizzazione seo. Offerte e Richieste di Lavoro e/o Collaborazione 0
E [offro] realizzazione siti web statici e dinamici Offerte e Richieste di Lavoro e/o Collaborazione 2
S [OFFRO] Realizzazione Siti Web HTML/Wordpress/Joomla Offerte e Richieste di Lavoro e/o Collaborazione 0
A [OFFRO COLLABORAZIONE][RETRIBUITO] Realizzazione siti web e software personalizzati Offerte e Richieste di Lavoro e/o Collaborazione 0
A [OFFRO COLLABORAZIONE][RETRIBUITO] Realizzazione siti web e software personalizzati Offerte e Richieste di Lavoro e/o Collaborazione 0
T [Vendo] Sito web già avviato (Realizzazione Di Siti Web) Compravendita siti e domini 0
F [Vendo] Sito web già avviato inerente la realizzazione di siti web Compravendita siti e domini 0
F realizzazione piccoli siti web per aziende. Come muovere i primi passi? Discussioni Varie 6
Web Italia [Offro] Realizzazione Siti Web GRATIS! e non solo... Offerte e Richieste di Lavoro e/o Collaborazione 2
Web Italia Realizzazione Siti Web: Web Italia Presenta il tuo Sito 5
G Guida cartacea per la realizzazione di siti web HTML e CSS 2
N [Cerco lavoro]- Realizzazione siti web e applicativi di vario genere Offerte e Richieste di Lavoro e/o Collaborazione 0
L IdeasForWeb.it - Realizzazione siti web! Presenta il tuo Sito 0
M [VENDO]Realizzazione siti web professionali e SEO con sconti fino al 100%! Offerte e Richieste di Lavoro e/o Collaborazione 0
P Realizzazione siti web dinamici e statici a prezzi "comodi"!!!!! Offerte e Richieste di Lavoro e/o Collaborazione 0
M Realizzazione siti web di qualsiasi genere Offerte e Richieste di Lavoro e/o Collaborazione 0
Angel777 Realizzazione Siti Web d'impatto Offerte e Richieste di Lavoro e/o Collaborazione 0
M [VENDO]Realizzazione siti web di qualunque tipo (ecommerce, blog, forum, ecc) da 80€ Offerte e Richieste di Lavoro e/o Collaborazione 2
N [Offro] Realizzazione Siti Web per qualunque possibilità di Budget Offerte e Richieste di Lavoro e/o Collaborazione 0
V Realizzazione di siti web è portali Offerte e Richieste di Lavoro e/o Collaborazione 0
R Realizzazione siti web (dinamici, flash, e-commerce, presentazioni aziendali) Offerte e Richieste di Lavoro e/o Collaborazione 0
B Realizzazione siti web statici e dinamici Offerte e Richieste di Lavoro e/o Collaborazione 0
W WebRik realizzazione siti web Presenta il tuo Sito 0
S Realizzazione siti web a basso costo Presenta il tuo Sito 0
P Editor per la realizzazione di siti HTML e CSS 0
G Realizzazione siti e app Offerte e Richieste di Lavoro e/o Collaborazione 0
MarcoGrazia Realizzazione siti internet Offerte e Richieste di Lavoro e/o Collaborazione 1
R Realizzazione siti internet Offerte e Richieste di Lavoro e/o Collaborazione 0
S Realizzazione Siti/ Montaggio Video,foto... Offerte e Richieste di Lavoro e/o Collaborazione 0
M Offresi per realizzazione siti, traduzioni, recensioni, articoli ed ecc.. Offerte e Richieste di Lavoro e/o Collaborazione 0
D Posizionamento e realizzazione siti Presenta il tuo Sito 1
L Realizzazione sito php Offerte e Richieste di Lavoro e/o Collaborazione 7
C [ OFFRO ] Realizzazione Sito Web Responsive design e Ottimizzato Offerte e Richieste di Lavoro e/o Collaborazione 1
K [CERCO -RETRIBUITO] Realizzazione logo , banner, video copertina pagina FB Offerte e Richieste di Lavoro e/o Collaborazione 0
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
Andrea_Ventura [HTML] Realizzazione di un layout dinamico di immagini HTML e CSS 4
A Primo lavoro realizzazione sito Leggi, Normative e Fisco 0
L [VENDO] realizzazione loghi - copertine - locandine a 10 euro Offerte e Richieste di Lavoro e/o Collaborazione 0
elpirata [CERCO][GRATUITO] Cercasi Web Designer per realizzazione front end gestionale Offerte e Richieste di Lavoro e/o Collaborazione 2
elpirata [Cerco][Gratuito]Cerco collaboratori per realizzazione piccolo gestionale Mysqli+Php Offerte e Richieste di Lavoro e/o Collaborazione 6

Discussioni simili