Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Web Design, nem vész el, csak átalakul

No description
by

Gábor Ferenczi

on 18 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Web Design, nem vész el, csak átalakul

responsive web design avagy nem vész el, csak átalakul Kellemes transzformációt kívánunk! http://vimeo.com/14852606 800 X 600 1024 x 768 STRETCH WEBSITE RESPONSIVE WEBSITE Miben más mint egy "nyúlós" oldal? Anno kis skálán mozgott a monitorok mérete.
Okostelefon még nem volt.
A leggyakoribb felbontáshoz "optimalizáltunk". Már alig vártuk, hogy a statisztikákban
átvegye az uralmat az 1024px.
Okostelefonok még nem nagyon voltak. Volt minimum szélesség, de nem volt maximum.
Ilyen nyúlós oldal például: www.php.net
Olyan praktikus ez, mint városban a limuzin!
Most már végre volt bőven hely, erre jöttek az okostelefonok... Alapvetően minden elemét megtartja, de:
áméretezi
átpozícionálja
átalakítja
és mindezt realtime teszi! 1024 768 320 480 640 768 1024 hogyan tervezzünk ennyi méretverziót? keressük meg a célközönség által használt
okostelefonok legkisebb szélességet! 320 BLACKBERRY HTC IPHONE NOKIA SAMSUNG 320 320 320 400 A jelenleg elterjedt okostelefonokhoz
az optimális minimum szélesség 320 px A tervezésnél a hasábokat ehhez a minimumhoz szabjuk. FONTOS! Már a tervezés korai szakaszában egyeztessünk
a front-end fejlesztővel, sitebuilderrel! (min-width: 300px) (min-width: 300px) width: 220px 960 px Hogyan fognak viselkedni a float elemek. 760 px 640 px 480 px 320 px Például sorrend nem mindegy.
Mi lesz felül, mi lentebb? Hoppá!
Itt mi történt? Ferenczi Gábor Artúr [proaction - kreatív vezető] Kuti Tamás [proaction - frontend fejlesztő] www.rsmdtm.hu Ez az autó miért nem nyúlik? Mert inkább átalakul!
Alkatrészei új elrendezésben
kapnak új értelmet! <meta
name="viewport"
content="width=device-width,
minimum-scale=1.0,
maximum-scale=1.0,
initial-scale=1.0,
user-scalable=no"> Méretarányos kicsinyítést nem akarunk!
Nem akarunk zoomoli! A mobil böngészőknek van
egy alapértelmezett nézőterük.
( Opera Mini - 850 px ) A CSS media query egy IF vezérlési szerkezet,
az oldalt megjelenítő eszközre vonatkozó feltételekkel. Lekérhetjük az eszköz típusát:
print
screen
tv
hendheld
stb.

és bizonyos tulajdonságait is lekérhetjük:
szélesség,
magasság,
képarány,
színes fekete-fehér
stb. megoldások @media only screen and (max-width: 320px){
.column{
float: none;
width: 100%;
}
}


@media only screen and (max-width: 480px) and (orientation: landscape){
#mobile-nav{
display: block;
}
#menu{
display: none;
}
} vagy akár több feltétel egyszerre: Ha a feltétel teljesül, lefut a kód... Megmondjuk, hogy ez az oldal
igazodjon az eszköz méretéhez: De ez még kevés! Itt jön képbe a CSS Media Query... VIEWPORT META TAG css MEDIA QUERY xfgsdfshdghdsf fsgsdfgsdfg sdfg sdfgsdjhkj
fgsdfg sdfgs dfg sdfg
Full transcript