Il tuo problema mi è chiarissimo: lo hanno tutti coloro che vogliono che il loro sito sia visibile su media diversi con diverse ampiezze e risoluzioni di schermo .
Mi è chiara anche la soluzione, che è però tutt'altro che breve e semplice.
Si tratta di scrivere tanti fogli di stile diversi quanti sono i diversi tipi di media ai quali ti vuoi riferire: mediante alcune istruzioni particolari questi fogli di stile vengono caricati solo se la risoluzione dello schermo rientra nell'intervallo che tu hai stabilito.
Naturalmente ciascun foglio di stile deve rappresentare le tue pagine in maniera adeguata alla risoluzione di schermo alla quale è dedicata, tenendo presente che non puoi rimpicciolire tutto altrimenti non si legge più niente e quindi gli elementi debbono essere disposti in modo diverso.
Nell'ambito dei normali PC e portatili, quindi con schermi da 14" in su e formati 4:3 o 16:9, è invece possibile agire solo sui parametri di larghezza degli elementi, facendoli adeguare automaticamente allo schermo che li visualizza. E qui entra in ballo il discorso dei valori percentuali.
Se tu per un elemento scrivi
width:400px;
quell'elemento avrà sempre una larghezza di 400 pixels, indipendentemente dall'ampiezza dello schermo che lo visualizza.
Se invece scrivi:
width:25%;
quell'elemento avrà un'ampiezza di 400 pixels su uno schermo ampio 1600, ma si ridurrà a 250 pixels su uno schermo ampio 1000.
Naturalmente gli elementi al suo interno si disporranno diversamente, in aderenza ai loro formati (ad es. il testo verrà rappresentato su più o meno righe).
Ti consiglio, se puoi, di procurarti il libro di Troiani "CSS - 3^ Edizione, ed. Apogeo", che è stato anche per me fonte di utilissimi consigli pratici, nonostante la mia quarantennale esperienza in informatica.
