Responzivní/flexibilní web

Ahoj mám dotaz, chtěl bych aby se mi webová stránka přizbůsobovala různým zařízením s ruzným rozlišením. Zatím jem jen docílil toho aby se mi to nezmenšovalo na malých displejích (pomocí <meta name="viewport" content="width=device-width, initial-scale=1.0">) teďka bych ale v .css souboru potřeboval udělat to aby se web přizpůsobil. V .css mám toto

body {
height: 100%;
background: #DEDEDE url('../img/bg2.gif') repeat-x 0 0;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
position: relative;
width: 900px; min-width: 900px;
margin: 0 auto;
padding-bottom: 60px;

}

na internetu jsem se dočetl že to souvisí s tím margin: 0 auto; dále nevím díky za jakoukoliv odpověď ...

Předmět	Autor	Datum
...teďka bych ale v .css souboru potřeboval udělat to aby se web přizpůsobil Trochu nejasná formula… Pavel 03.01.2019 17:29	Pavel	03.01.2019 17:29
Jde mi hlavně o to aby se to např. na mobilních telefon zobrazilo např. tak abych to posouval jen v… novice 03.01.2019 17:33	novice	03.01.2019 17:33
No to nebude tak těžký; jakmile pochopíš CSS grid, media queries a breakpointy, máš vlastně vyhráno. Pavel 03.01.2019 17:41	Pavel	03.01.2019 17:41
Až budeš svůj web testovat, nemusíš pro mobilní zobrazení používat mobil; na PC v prohlížeči Chrome… Pavel 03.01.2019 17:44	Pavel	03.01.2019 17:44
Předně popřemýšlej, jak se může zasnoubit responzívní design s body {width: 900px; min-width: 900p… hynajs 03.01.2019 17:36	hynajs	03.01.2019 17:36
No tak to vypadá, že se v tom budu muset babrat :( zkusím nastudovat a pak se kdyžtak obrátit na něk… novice 03.01.2019 17:45	novice	03.01.2019 17:45
Vždyť se klidně ptej i tady, když narazíš na něco nejasnýho. Začal bych úplně jednoduše: jeden div… Pavel 03.01.2019 17:49	Pavel	03.01.2019 17:49
media query. Ja responzivitu dokonča riešim kombináciou gridu a media query, pričom to ešte korením… poslední Mlocik97 03.01.2019 17:55	Mlocik97	03.01.2019 17:55

...teďka bych ale v .css souboru potřeboval udělat to aby se web přizpůsobil

Trochu nejasná formulace. Jde ti o velikost prvků, jejich pořadí a umístění, ...? Líp to popiš.
Trocha info k responzivitě je v článku o CSS grid.

Jde mi hlavně o to aby se to např. na mobilních telefon zobrazilo např. tak abych to posouval jen v ose y. Např aby to fungovalo jako na stránkách

https://www.obecbukvice.cz

ale to už bude asi pro mě velké sousto. Schválně se zkus podívat na ty stránky na MT a na PC.

No to nebude tak těžký; jakmile pochopíš CSS grid, media queries a breakpointy, máš vlastně vyhráno.

Až budeš svůj web testovat, nemusíš pro mobilní zobrazení používat mobil; na PC v prohlížeči Chrome stiskni při načteným webu klávesu F12 a máš to.

Předně popřemýšlej, jak se může zasnoubit responzívní design s


body {width: 900px; min-width: 900px;}

Musíš začít od začátku:

česky

anglicky

atd...

No tak to vypadá, že se v tom budu muset babrat :( zkusím nastudovat a pak se kdyžtak obrátit na někoho zkušenějšího. Ale díky.

Vždyť se klidně ptej i tady, když narazíš na něco nejasnýho.

Začal bych úplně jednoduše: jeden div jako kontainer, uvnitř dva další divy. Na PC se zobrazí vedle sebe, na mobilu (tj. breakpoint řekněme max-width: 600px) se zobrazí pod sebou. Od toho bych se odrazil a postupoval dál. Vše odladíš v Chromu na PC.

media query. Ja responzivitu dokonča riešim kombináciou gridu a media query, pričom to ešte korením ne"px" jednotkami... poznáte vw, vh, rem, a pod? A ešte do toho dlabem JavaScriptom.

p.s. odporúčam prečítať: https://www.vzhurudolu.cz/prirucka/css3-media-queries a https://www.vzhurudolu.cz/prirucka/css-grid ale to už je skôr pre pokročilejšie.

Zpět do poradny Odpovědět na původní otázku Nahoru