Quindi intendi dire: applicare una determinata proprietà quando screen-size varia. Questo lo fai con le media queries. Vale a dire:
@media screen and (max-width: 480px) {
body {
/* istruzioni per lo schermo piccolo*/
}
}
@media screen and (min-width: 481px) {
body {
/* istruzioni per lo schermo grande*/
}
}
Ovviamente 480px è un valore di esempio, metti ciò che vuoi. Così come l'ho riferito al <body>, puoi anche riferire il comando a classe o ID specifico.
Nel tuo caso comunque, anche senza media-queries, una soluzione è semplicemente quella di inserire la proprietà float:left, che fa collassare sotto i vari elementi. Quindi se non è responsive (larghezza elementi in percentuale, ma hai un valore fissato di px), se restringi oltre un certo valore, l'element a destra collassa sotto l'altro. Ti metto un esempio semplice:
<style>
button{width:500px;float:left}
</style>
<button>B1</button><button>B2</button>
Chairo che dipende dalla tua risoluzione schermo, comunque se all'apertura a tutto schermo la pagina è maggiore di 1000px (immagino ovviamente di sì), vedi i bottoni B1 e B2 allineati. Se restringi la pagina, prima o poi vedi B2 che collassa sotto B1. La strada da seguire quindi è questa.
