Responsive design

[Crosis88]

Salve a tutti
Mi sto cimentando nell'utilizzo delle tecniche di Responsive Design, in modo da non dover creare più layout per mobile e altri dispositivi, ma far si che il signolo layout si adatti a tutto.

Sono riuscito a nascondere e visualizzare elementi (principlamente div) a seconda dell'altezza e della larghezza della finestra.

La mia domanda è, oltre a nascondere e visualizzare, è possibile anche MODIFICARE gli elementi?
Mi spiego meglio, con quello che ho fatto fin'ora, per esempio ho creato due div con lo stesso contenuto, ma dimensione diversa. A seconda della dimensione della finestra, mi carica o il div 1, o il div 2.
Ma ciò significa aver doppi contenuti.

Se io volessi invece che il div cambi altezza, si rimpicciolisca, cambi margini, padding etc, a seconda della dimensione dello schermo, è possibile senza crearne un secondo?

Perchè ho provato utilizzando questo codice:

@media only screen and (max-width: 1200px) {  
#titolo_header {
height:400px 
} 
}

Ma non vuole collaborare

Grazie in anticipo a chiunque risponderà!

[fcaldera]

sì, puoi farlo esattamente come hai mostrato con il tuo esempio
se non va, prova a replicare un esempio conciso su jsfiddle o jsbin

[Crosis88]

Scusa l'ignoranza, non capisco a cosa ti riferisci (mai sentito quelle cose nominate da te).

[fcaldera]

Originariamente inviato da Crosis88
Scusa l'ignoranza, non capisco a cosa ti riferisci (mai sentito quelle cose nominate da te).

se non posti un link ad una pagina che non ti funziona come possiamo capire quale sia il problema?

quindi o posti un link ad una demo oppure ne crei una al volo usando dei servizi online di code storage come jsfiddle.net, jsbin.com, dabblet, codepen... etc etc e ci posti l'indirizzo con un esempio che non funziona come dovrebbe

[icobi]

ecco un po di link utili dove studiare!

alistapart.com
goldengridsystem.com
golden grid explained
css-tricks.com
l-incredibile-em-e-i-layout-elastici-con-i-css
Managing Fluid Grid Layout

online trovi tantissimo materiale! e non poco su questo forum!

[ratte]

Eeee.... povero Crosis! quante cose che gli date da fare!
Si, cmq la risposta e certo SI, come ti dice fcaldera certo.
Se hai bisogno che un div cambi: lo fai cambiare e bom... sarebbe un po contorto crearne 2 con contenuti identici mostrati/nascosti.

o/ !

[ratte]

Tiè, prova ad usare il mio pixel coso se ti aiuta... è mio personale, quindi funziona come gli pare, ma funziona 8)

o/ !

[icobi]

sarebbe un po contorto crearne 2 con contenuti identici mostrati/nascosti.

sarebbe un enorme scassamento!

[Crosis88]

Scusate, sono stato via un po, ma rievoco la mia discussione in quanto non sono ancora riuscito a trovare soluzione.

Intanto grazie a tutti per le risposte.

In definitiva, la faccio semplice, in modo da non dover linkare il progetto (vorrei evitare di farlo, in quanto potrei avere problemi).

Ho un menù, che voglio si rimpicciolisca (font-size) se la finestra del browser mi scende sotto gli 850 px di altezza.

Io ho questo css nativo (molto easy e ridotto lo posto):

.nav-bar {
font-size:14px;
}

La mia media query è la seguente (scritta all'interno dello stesso css):

@media only screen and (max-height: 850px) { 
.nav-bar { 	
font-size:10px; 
}
}

Ora, questa cosa non mi funziona minimamente. Ma la media query funziona, perchè se ci metto display:none, il menù sparisce quando riduco l'altezza della finestra del browser!
Le medie query non sovrascrivono il css nativo?

[cassano]

Hai messo la media query dopo il tuo css nativo ?