Hogyan tudom megcsinálni, hogy a weboldal mérete illeszkedjen minden mérethez?

Nemrég kezdtem foglalkozni a responsive megjelenítéssel és a css3 már nyújt rá kényelmesebb lehetőségeket. A flex(box)-ot érdemes használni arra,hogy a tartalom bizonyos részei hogy legyenek felosztva egy adott területen belül, azaz az elemek az adott területen belül hogyan igazodjanak stb...(vagy bootstrap és hasonló framework félét) De ugye számos kérdés felmerül, mert valahol el kell dönteni,hogy mi lesz átméretezhető és mi nem.

Illetve,hogy minden képernyőméreten az az elrendezés lesz a megfelelő? Az adott képernyőmérere vonatkozó stílusokat külön is lehet definiálni : [link]

Szóval lehet trükközni,hogy pl: eltűntethetsz egyes elemeket és másokat jelenítesz meg mobil telefonon,mint mondjuk egy 1024px széles pc képernyőn..

css:

body{

background: url........;

backround-size:cover;

-moz-backround-size:cover;

-webkit-backround-size:cover;

-o-backround-size:cover;

}

Vagy jquery pluginnal is megoldhato.

Lehet pl. % -ban megadni, bár ez nem mindig tökéletes.

Illetve az új CSS3 -ban van Viewport Units.

Ez is % -nak felel meg, csak az pl. a Screen Width és Height -et veheti alapul.

Míg a sima % -al az őt körbe vevő relativ/absolute pozíciójú elemhez viszonyul.

Tehát Viewport Units -el határozod meg az oldal minden elemének méretét.

(Width/height/padding/margin/font-size...)

Akkor az képernyő felbontástól függetlenül mindig pont ugyan ott lesz...

Ha ezt hozzá adjuk a @MediQuery -hez, akkor egy tökéletesen reszponzív és méretarányt tartó oldalt tudunk készíteni.

De az üröm az örömben, hogy sajnos ez IE9 től működik, és ott se tökéletes még, inkább IE10.

És hogy 5-nél régebbi droidok alap böngészője még nem ismeri.

Így kénytelen vagy jó öreg PX vagy % -ban megadni előtte, hogy nagyjából hasonlítson.