Hogyan lehet php nélkül megcsinálni, hogy egy html elem szélessége legyen fix, de ha kicsi a böngésző szélessége akkor viszont legyen %-ban megadva?

PHP ehhez semmiképpen nem kell.

CSS viszont annál inkább, nézd meg annajk a lehetőségeit.

[link]

alul a példa ki is írja az aktuális méretet

Ezt css mediaquery-vel meg lehet oldani. Szóval még javascript sem kell hozzá, viszont a mediaquery használata elsőre nem túl egyszerű.

Erre keress rá google-ön: mediaquery, responsive webdesign

Lényege, hogy különböző médiumokon (vagy különböző szélességű böngészőkben) más-más css fájlok kerülnek alkalmazásra, vagy más-más css szabályokat használ az oldal.

A másik megoldás, hogy az oldalad szélességét így adod meg (css):

width: 100%;

max-width: 800px;

Ettől a 800 pixelnél keskenyebb képernyőkön is max szélességre húzza szét az elemet a css, a szélesebbeken pedig 800 pixel lesz a szélesség.

Akkor hát egy kis mediaquery alapok. Így húzd be a megfelelő stíluslapokat (csak példa):

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="dat/normal_style.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-width: 999px)" href="dat/tablet_style.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-width: 399px)" href="dat/mobil_style.css" />

Ezekben a css lapokban gyakorlatilag ugyanazok az elemek formázásai találhatóak meg, de más-más formázással. Itt célszerű beállítani a méret- vagy pozíciófüggő elemek stílusát (pl.: szerkezeti div dobozok, menüpontok, ha változik a helyzetük, vagy méretük).

Persze célszerű egy általános célú stíluslapot is használni, amiben az összes mérettől független elem stílusát tárolod (pl linkek, headingek, táblázatformázások, listák).

Ez persze csak az alap, egy jó reszponzív oldal figyel a képek automatikus méretezéseire is. Viszont kiindulásnak szerintem jó, és annyira nem nehéz megcsinálni. A lényeg, hogy minden méretvariációra legyen wireframe, és design terv is és így alakítsd ki a weboldal variációit.