Hirdetés
-
Anyagi katasztrófára figyelmezteti az Apple-t a brit média
it AI-alapú adatvédelmi funkciót (reklámblokkolót) kaphat a Safari böngésző az iOS 18-ban, de brit médiacsoportok arra figyelmeztetik az Apple-t, hogy ez anyagi katasztrófát okozhat az ágazatban.
-
Multiversus - Így harcol Joker
gp A free-to-pay játék teljes kiadása a hónap végén startol minden platformon.
-
67 wattos gyorstöltés és Leica kamerák a Xiaomi kagylóján?
ma Megkérdőjelezhető hitelességű fotó és valós hitelesítési adatok a Mix Flipről.
Új hozzászólás Aktív témák
-
Sk8erPeter
nagyúr
válasz PumpkinSeed #1633 üzenetére
"A reszponzív design csak akkor lép érvénybe
n, ha az eredetileg tervezett felbontásnál kisebb felbontáson is szeretnéd megjeleníteni az oldalad."
Vagy épp nagyobbon.Sk8erPeter
-
PumpkinSeed
addikt
válasz Sk8erPeter #1635 üzenetére
Ezt hogy érted?
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
honda 1993
senior tag
Valojaban azert furcsa nekem is ez a dolog, mert ahogy mondtatok is , ez a dolog a felbontas fuggvenyeben valtozik.
Viszont eddig kiprobaltam az oldalamat kb 4 kulombozo felbontasu monitoron es mindegyiken rendesen mukodott.
Csak a multkor amikor a TVn probaltam akkor nem volt tokeletes.XD alias IKSZDé
-
DNReNTi
őstag
válasz PumpkinSeed #1636 üzenetére
Nem csak mobil tablet és desktop nézet van, hanem hd, retina és 4k is. Illetve hát ki, hogy implementálja, nincs ez kőbe vésve. Gondolom erre célzott.
Szerk:
(#1637) honda 1993
Hát hogy érdemi segítséget is kapj, először is kéne kód. JSFiddle-n szípen leegyszerűsítve. Lottózhatunk itt estig, én ráérek, de amíg nem tudjuk mit csinálsz elég kicsi az esélye, hogy megtudjuk mondani mi a gond. Továbbá még mindig nem tudjuk mekkora annak a TV-nek a felbontása.
Szerk:
Mégtovábbá ajánlanám figyelmedbe Zedz egyszerű kis példáját, ha ezzel a módszerrel igazítod középre az oldalt, tök mindegy mekkora kijelzőn nézed, mindig középen lesz, akár mobil, akár 4K.[ Szerkesztve ]
but without you, my life is incomplete, my days are absolutely gray
-
fordfairlane
veterán
válasz PumpkinSeed #1636 üzenetére
Úgy érti, hogy a reszponzív design a CSS media query-re épül, ami esetében nem csak minimális felbontásra lehet vizsgálni. A felbontást úgy kezeled, ahogy az jól esik. Sőt, vizsgálhatod a színmélységet és sokminden mást. [link]
x gon' give it to ya
-
DNReNTi
őstag
válasz fordfairlane #1639 üzenetére
Wow. A színmélység vizsgálat nekem is új. Mondjuk kíváncsi lennék én arra az eszközre, amin olyan böngésző fut, ami kezeli a media query-ket, de 256 színű kijelzője van.
but without you, my life is incomplete, my days are absolutely gray
-
PumpkinSeed
addikt
válasz fordfairlane #1639 üzenetére
Igen, de én úgy értettem, hogy HD felbontásra megtervezem az oldalt beteszem középre és (bár a 4K-s kijelzőkön ez már nem működik) a HD-nál nagyobb kijelzőkön is elviselhetően néz ki az, ezért csak az ennél kisebb kijelzőkre kell media query-ket alkalmazni. Bár lehet át kell térni más szemlélet módra az ilyen óriások miatt mint a 4K.
Ezt a színmélységet még én se láttam.
(#1638) DNReNTi
A felső szöveg a te válaszodra is szól.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
DNReNTi
őstag
válasz PumpkinSeed #1642 üzenetére
Érthető, végül is tök ugyanarról beszélünk. Szerintem a többség (pl én) default-nak a desktopot tekinti, ami ugye az 1024-1260px szélesség körül/között mozog. Ettől pedig van nagyobb, legalább egy: a FHD. De ez ilyen idealista nézet, nem sokan törődnek ezzel, van mobil/tablet/deskrop a többieknek meg ott a ctrl+plusz.
but without you, my life is incomplete, my days are absolutely gray
-
PumpkinSeed
addikt
válasz DNReNTi #1643 üzenetére
Igen, de ha 1260px-en középre teszed az oldalt és ezen belül ténylegesen az oldal mérete mondjuk 1200px széles akkor azt az FHD-s monitorral rendelkező ember is látni fogja, szerintem. Bár függ attól, hogy hány colon nézi azt az FHD-t. Ha valaki 15-s laptopon néz akkor nem csak az én oldalamtól fog kifolyni a szeme hanem a Windows-tól is.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
DNReNTi
őstag
válasz PumpkinSeed #1644 üzenetére
Egyetértek. A laposom 15" FHD. Kellemetlen.
but without you, my life is incomplete, my days are absolutely gray
-
fordfairlane
veterán
válasz PumpkinSeed #1642 üzenetére
Nem értem, mit akarsz közölni velem. Középre igazításhoz nincs szükség média querykre. A média querykre akkor van szükség, ha megjelenítőtől függő stíluselemeket szeretnél használni. Például keskeny képernyőn mindent egymás alá pakolsz, széles képernyőn viszont van hely balra-jobra. Ebben az esetben egy bizonyos vízszintes felbontás alatt más stílusdefiníciókat használsz, mint afölött. Ennyi.
A média queryk feltételvizsgálatai nem csak felbontásra, hanem további négy osztályozás is létezik, megjelenítő típusra (screen, print), színmélységre, orientációra (landscape, portrait), és oldalarányra vonatkozhat.
Stílusdefiníciókat megadhatsz úgy, hogy alapvetően asztali gépre, annak a megjelenítőjére tervezed az oldalt, és az ettől való eltérés kezeled külön média-querykkel. Például ha a vízszintes felbontás 640px-nél kisebb, akkor a default stílushoz képest ez meg az az elem eltér. A másik megközelítés, hogy mobileszközre tervezeda megjelenítést, és aztán ahogy skálázódik a megjelenítő fewlbontása felfelé, úgy adod meg az adaptálódó stíluselemeket. Ezt nevezik "mobile-first" stílustervnek. Ezzel a kifejezéssel a Bootstrap 3-nál is lehet találkozni, a készítői is ezzel a mobile-first szemlélettel építették fel pl. a CSS grid rendszert.
x gon' give it to ya
-
Sk8erPeter
nagyúr
válasz DNReNTi #1643 üzenetére
"Szerintem a többség (pl én) default-nak a desktopot tekinti, ami ugye az 1024-1260px szélesség körül/között mozog"
What? Saját felhasználási szokásainkból nem érdemes átlagot vonni. Azért manapság elég gyakoriak a nagy monitorok (épp ilyenen bámulom a fórumot), pl. egy 24"-es monitoron a min. 1920×1080-as felbontás elég valószínű, és ez a felbontás manapság egyáltalán nem számít extrémnek. Több ismerősömnek is van ekkora monitorja, meg itt a fórumon is sokan rendelkeznek ilyennel, de ez alapján sem érdemes átlagot vonni (létezik ugye 27"-es monitor is, meg persze gyakoribb az ennél kisebb monitor), ettől függetlenül kijelenthető, hogy egyre többen relatíve nagy monitoron böngésznek, mert már elérhetőbb áron kaphatók egész jó minőségűek. De még a laptopomnál is a nem túl izmos 1366x768-as felbontás a jellemző, ez a szélesség is nagyobb, mint amit írtál (BTW 15.6"-es kijelző).
Aztán lehet csavarni a dolgon, a tálcát ki szoktam rakni a default alsó elhelyezésről bal oldalra (függőleges lesz), így az 1920-as vagy épp 1366-os (vagy ha további másik monitor, akkor megint más) szélesség csökken, cserébe a függőleges terület nagyobb (ez nagyon sokszor jól jön, mert kevésbé szélesek szoktak lenni pl. a honlapok is, mint a hosszanti (függőleges) tartalom az érdekes), szóval a szélességek össze-vissza változnak - ez utóbbi tény persze nem túl meglepő, csak a tesztelés miatt mondom, ami a developer toolokkal is könnyen elérhető (ebben mondjuk az én tapasztalatom szerint a Firefox különböző felbontásokra tesztelést lehetővé tevő eszköze jobb, mint a Chrome-é, pedig utóbbit gyakrabban használom).
Az 1024 pixeles szélesség asztali monitornál azért manapság már ritka (legalábbis jóval ritkább, mint az ennél nagyobbak).
Szóval elméletileg sok szélességre kellene tesztelni, nyilván túlzásokba sem érdemes esni, mert az a karbantartást is nehezíti.A media query-k, meg általában a reszponzivitás nem úgy tekintendők, hogy van az én kijelzőm, és aztán vannak az annál kisebbek.
Sanszos, hogy vannak nagyobbak is, amikre elméletileg szintén gondolni kéne.Egy példa: a Javítsuk a Prohardvert! topicban néhányan panaszkodtak, hogy egy nagy monitoron (pl. 24"-en) már hülyén néz ki a "csíkfórum", tehát hogy középen van egy, az elérhető területhez képest relatíve szűk csík, amin elhelyezkednek a hozzászólások, a többi terület kihasználatlan. Bár az olvashatóság miatt szerintem nem rossz a korlátozott oszlopszélesség (ha nagyon széles lenne a hozzászólás, rontaná az olvashatóságot sztem), vannak, akik szerint valamilyen módon jobban ki kellene használni a helyet.
Szóval nem árt olykor gondolni a nagyobb kijelzőkre is (bár tény, hogy nem egy egyszerű kérdés, hogy egy akkora területen mi az, ami még nem nézne ki idétlenül).(#1636) PumpkinSeed:
Úgy értem, ahogy itt fentebb írtam.
Meg ahogy fordfairlane is írta. Szerk.: és velem pont egyszerre hasonlót írt, azzal a kiegészítéssel még jobban érthető a mondandónk.[ Szerkesztve ]
Sk8erPeter
-
honda 1993
senior tag
Sziasztok.
A haverom folyton azzal idegesít hogy ha responzive oldalt szeretnék, akkor az egész oldalamat elölről kell kezdenem és csak úgy lehet megcsinálni.
Viszont ti a múltkor írtátok hogy meg lehet csinálni utólag is, a kérdés csak annyi volna hogy valóban az lenne a kézenfekvő ha elölről kezdeném az egészet, vagy szerintetek is ostobaság ez az állítás?
Valójában az oldalam szerkezete viszonylag egyszerű.
Sok img_containert használok, ezek alatt szoveg van és osszesen 3 db menu van az oldalon ( főmenu, egy jobb oldali menu és egy almenu.)
Azért írtam le ezt nektek, mert azt hallottam hogy az oldal szerkezete sem mindegy hogy milyen... pl: egy táblázatokra épülő oldal esetében sokkal nehezebben kivitelezhető a dolog.XD alias IKSZDé
-
PumpkinSeed
addikt
válasz fordfairlane #1646 üzenetére
Én ezt értem, de amúgy nem is írtam, hogy a középre igazításhoz media query kell. Én csak annyit írtam le, hogy ha csinálok valamit akkor annak a reszponzív részét hogyan oldom meg. A mondandóm lényege annyi volt, hogy elsőnek megcsinálom a laptopom szélességére az oldala arra optimalizálok, majd az annál kisebb eszközökre is, és sajnos eddig nem optimalizáltam nagyobb képernyőre. A másik dolog amikor a képernyő teljes szélességét kihasználom a width: 100% header-el, akkor általában nem is nagyon kell foglalkozni a nagyobb képernyővel, mert az elemek nem csúsznak egymásra, az meg, hogy kicsit távolabb vannak egymástól már nem olyan számottevő probléma.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
fordfairlane
veterán
válasz PumpkinSeed #1649 üzenetére
Oké, akkor én meg leírtam, hogy hogyan másképp szokás még reszponzívvá tenni az oldal megjelenítését. Ha valami 100% szélességű, akkor pont hogy egymásba csúszhatnak az elemek, ha egy keskeny kijelzőn nézi valaki az oldalt. Éppen a relatív hosszmértékek alkalmazása az, ami sokszor nem elég a különféle képernyőméret - képernyőoldal-arány kezeléséhez, ezért is lett kitalálva az egész media-query szisztéma.
x gon' give it to ya
-
PumpkinSeed
addikt
válasz honda 1993 #1648 üzenetére
Én a reszponzív megvalósítást mindig utólag csinálom. Bár ha jó az oldalad felépítése akkor bármikor lehet.
A táblázatos oldalfelépítést életfogytiglani fegyház büntetéssel jutalmazzák.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
PumpkinSeed
addikt
válasz fordfairlane #1650 üzenetére
"akkor általában nem is nagyon kell foglalkozni a nagyobb képernyővel, mert az elemek nem csúsznak egymásra"
Igen tudom, hogy a keskenyebb képernyőn egymásra csúsznak ott szoktam alkalmazni a media query-ket, hogy bizonyos felbontáson úgy rakosgatom az elemeket, hogy azok jók legyenek. De én nagy kijelzőt írtam.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
fordfairlane
veterán
válasz PumpkinSeed #1652 üzenetére
A mobile-first tervezés manapság már nem olyan ritka. Említhetném megint a Bootstrapet. Szóval értem én, hogy te hogy szoktad csinálni, de ez azért nem az oldaltervezés nonplusz ultrája.
x gon' give it to ya
-
honda 1993
senior tag
válasz PumpkinSeed #1651 üzenetére
Én a reszponzív megvalósítást mindig utólag csinálom.
Tehat akkor az az allitas amit a haverom megfogalmazott valoban egy baromsag ugye?
Mert bevallom nem szeretnem ujrairni az egeszet.
Sot, valoszinuleg a responzive reszt ,majd csak az utan csinalom meg hogy feltoltottem az oldalt, mert már tenyleg nagyon szeretnem vegre utnak inditani.[ Szerkesztve ]
XD alias IKSZDé
-
Zedz
addikt
válasz honda 1993 #1648 üzenetére
Ha a HTML struktúra rendezett, könnyen kezelhető, akkor elég megírni a rá szabott reszponzív designt. Persze lehet olyan eshetőség is, hogy mondjuk felépítenek egy komplex weboldalt, teljesen desktopra szabva, majd az idő múlásával felvetődik a mobilra optimalizáltság kérdése is. Na ekkor lehet agyalni, hogyan valósítsuk meg.
De ha az előbbi eset érvényes az oldaladra, akkor media-querykkel meg tudod csinálni.
-
honda 1993
senior tag
En most csinaltam valamit, es ugy tunik hogy mukodik de kozben szinte biztos vagyok benne hogy az egesz ugy szar ahogy van
a head reszbe ezt irtam : <link rel="stylesheet" type="text/css" href="responzive.css" media="screen and (max-width: 500px)">
Mig a "responzive.css" fajlba mindent osszezsugoritottam annyira, hogy mobiltelefonos meretben is hasznalhatobb legyen.
Ezzel azt ertem el, hogy ha a bongeszo ablak merete kisebb lesz mint 500px; akkor lep ervenybe a "responzive.css" fajl.Tudom hogy nagyon nehezen lesz ertelmezheto az utobbi szoveg, de sajnos mivel nagyon kezdo vagyok a temat tekintve ( responzive design), nem igazan tudom megfogalmazni ugy ahogy kellene.
A kerdes csak az lenne, hogy mennyire van kozel a valos megoldashoz az amit itt most osszeganyoltam?
Igazabol csak megneztem egy par perces youtube tutorialt es utana probalkoztam vele.XD alias IKSZDé
-
PumpkinSeed
addikt
válasz fordfairlane #1653 üzenetére
Nagyon zavaró amúgy, hogy ilyen sok mindenre kell odafigyelni. Érthető is, hogy miért ér olyan sokat egy jó fejlesztő munkája.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
Zedz
addikt
válasz honda 1993 #1656 üzenetére
Lehet így is, vagy a media-queryt írhatod még közvetlen a CSS fájlba is.
Ezzel azt ertem el, hogy ha a bongeszo ablak merete kisebb lesz mint 500px; akkor lep ervenybe a "responzive.css" fajl.
Igen, valami ilyesmről van szó. Ha ezt magában a CSS-ben adod meg, akkor a media-query közt lévő stílus akkor lép érvénybe, ha mondjuk 500 pixelnél kevesebb a width.
@media (max-width: 500px) {
/* ide jön a stílus 500px alá */
} -
honda 1993
senior tag
Megnezem majd a media-query-t is, de ha azt mondjatok hogy az a megoldas amit en alkalmaztam szinten elfogadhato, akkor lehet hogy egyelore igy hagyom....
Bar mondjuk en mar lattam olyan responzive oldalt ahol folyamatosan zsugorodott es rendezodott az oldal tartalma , a bongeszo ablak meretenek csokkentesevel.
Az enyem nem ilyen, de ha ezt is lehet majd hasznalni telefonrol akkor vegul is en elegedett leszek.. ( mas kerdes hogy az oldal latogatoi mit szolnak majd hozza.)Viszont ez az elso olyan dolog css-ben, amire valoban ugy jottem ra hogy hasznaltam a fejemet egy kicsit... Lehet hogy gyakrabban ki kellene probalnom?
szerk: van valami ami viszont nem az igazi, megpedig a " body".
Ugyanis ez tovabbra is olyan szeles mint a sima style.css fajlban, es nem tudom hogy mit kellene beleirni ahoz hogy olyan szeles legyen mint acontainerakarom mondani : page.Probalkoztam azzal hogy width: 500 px; de ez nem jo..
otlete van valakinek?
[ Szerkesztve ]
XD alias IKSZDé
-
honda 1993
senior tag
az a baj vele hogy igy hiaba nez ki jol szinte az egesz oldal, mert a tul szeles body miatt ugyan olyan sokat kell oldalra tekerni , mert tul nagy az ures hely a page 2 szele mellett.
[ Szerkesztve ]
XD alias IKSZDé
-
fordfairlane
veterán
válasz PumpkinSeed #1657 üzenetére
Ezért is vannak olyanok, akik front-endre specializálták magukat. Illetve ez is az oka annak, hogy a CSS-frameworkok használata terjed, mint amilyen pl. a Bootstrap vagy a Foundation.
[ Szerkesztve ]
x gon' give it to ya
-
DNReNTi
őstag
válasz honda 1993 #1659 üzenetére
Mer media query-k nélkül, hogy lehetne responsive az oldal? Jó tudom így, de komolyan?
but without you, my life is incomplete, my days are absolutely gray
-
honda 1993
senior tag
válasz DNReNTi #1662 üzenetére
Most akkor mégsem jó az amit én csináltam? Az előbb azt mondták hogy ez is egy megoldás...
Igazából nem is kifejezetten responzive oldalt akarok, egyelőre megelékszem azzal hogy ha van egy külön mobil nézet is..Bár azt még nem tudom hogy hogyan lehet olyat csinálni hogy amikor betöltődik az oldal telefonról akkor a mobil nézet fogadja a látogatót, de legyen lehetősége átállítani az asztali nézetre.
XD alias IKSZDé
-
PumpkinSeed
addikt
válasz honda 1993 #1663 üzenetére
Az a baj, hogy olyan madárra lövöldözünk amit nem látunk a felhőktől. Ha nem látjuk, hogy mit akarsz miből csinálni akkor pocsékolhatjuk itt a töltényeket, nem lesz madár a vacsora.
(#1661) fordfairlane
Na és ha amúgy én most szeretnék egy ilyen moduláris blogot csinálni, ami ilyen CMS-hez hasonló összekattintgatható szutyok lenne akkor mennyire szabad ilyen frameworkot használni? Eddig is szemezgettem ezzel a Foundation-al.
[ Szerkesztve ]
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
Zedz
addikt
válasz honda 1993 #1663 üzenetére
Az is egy megoldás igen, de az igazi ha magába a CSS fájlba írod a media-queryket. Illetve írtad, hogy nem megy magától folyamatosan össze. Ezt vagy úgy tudod megoldani, hogy mondjuk százalékban adod meg az elemek szélességét, vagy több "töréspontot" hozol létre szintén a media-queryk segítségével. Pl. csinálsz 1000, 800, 600, 400 pixelre, vagy ahogy jól esik.
@media (max-width: 1000px) {
/* ide jön a stílus 1000px alá */
}
@media (max-width: 800px) {
/* ide jön a stílus 800px alá */
}
...stb -
Jim-Y
veterán
mobile first
phonegap + responsive = minden lefedve
[ Szerkesztve ]
-
DNReNTi
őstag
válasz Sk8erPeter #1647 üzenetére
Bocsi, hogy csak most írok, csak ilyen kifejtett válaszra nem akartam félmondatot visszadobni, hosszabbra meg nem volt idő.
"Azért manapság elég gyakoriak a nagy monitorok"
Teljesen igazad van, ha magamból indulok ki, gyakorlatilag minden eszközöm FHD. De ettől még nem terveznék egy weboldalt/webapp-ot alapértelmezetten fullHD szélességre."laptopomnál is a nem túl izmos 1366x768-as felbontás a jellemző"
Ezen a szélességen még szerintem elfogadható egy mondjuk 1000px széles weboldal."van az én kijelzőm, és aztán vannak az annál kisebbek. Sanszos, hogy vannak nagyobbak is, amikre elméletileg szintén gondolni kéne."
Igen, végül is kicsit rövidebben de ezt írtam le én is."a Javítsuk a Prohardvert! topicban néhányan panaszkodtak, hogy egy nagy monitoron (pl. 24"-en) már hülyén néz ki a "csíkfórum""
A PH! kiváló példa én is fel akartam hozni. Egy IT szakmai fórum ami fix 990px széles, holott igen valószínű, hogy aki egy ilyen fórumot olvas, az a lehetőségeihez képest igyekszik jobb tech cuccokkal körülvenni magát, tehát itt fokozottan igaz, amit te is írtál. Valószínűleg a nagy többség 1920x1080 felbontáson böngészi az oldalt, és tré, hogy 150%-os nagyítással élvezhető csak. Illendő lenne egy 1600-as breakpoint.Na de vissza a lényegre, attól mert már elterjedtebbek a nagyobb felbontások mint az ősi 1024-1260, én még nem tenném a desktop nézetet az e feletti felbontástartományba, rákényszerítve a kisebb felbontáson netezőket a tablet nézet használatára. Ugyan, mint írtam is egy korábbi posztban, nincs ez kőbe vésve, de szvsz a mobil / tablet / desktop / fhd (és akár a 4k) breakpointok lefednek mindent.
but without you, my life is incomplete, my days are absolutely gray
-
Sk8erPeter
nagyúr
válasz DNReNTi #1667 üzenetére
"Na de vissza a lényegre, attól mert már elterjedtebbek a nagyobb felbontások mint az ősi 1024-1260, én még nem tenném a desktop nézetet az e feletti felbontástartományba, rákényszerítve a kisebb felbontáson netezőket a tablet nézet használatára."
Ezt a tabletnézetre "kényszerítést" most nem értem: pont az a lényege a reszponzív kialakításnak, hogy nincsenek különálló desktop és mobil (vagy tablet) nézetek, hanem az oldal elemei felbontástól függően másképp helyezkednek el, kicsit máshogy néznek ki (pl. más szélességűek, stb.), de egyéb tekintetben az oldal ugyanaz. Szóval pl. teszteled, hogy kisebb szélességen hogy néz ki, aztán mi van, ha nagyobb felbontáson nézed, és így tovább, és közben szépítgeted.
Nem úgy, mint itt, a PH!-n, ahol a kissé lejárt, béna, különdomaines, mobilfelületre átirányítós megoldás van (m.prohardver.hu aldomainen).Sk8erPeter
-
Zedz
addikt
válasz honda 1993 #1669 üzenetére
Simán a CSS kódba kell beleírni.
-
honda 1993
senior tag
Na de úgy ahogy pl ha HTML-ben létrehozok egy divet és utána tudok csak a css segítségével annak a divnek tulajdonságokat adni ,gondoltam hogy a media query is hasonlóan működik.
Nem kell semmilyen külön link sem a html kódba?
mint pl a <link rel="stylesheet" type="text/css" href="style.css">
XD alias IKSZDé
-
DNReNTi
őstag
válasz honda 1993 #1671 üzenetére
but without you, my life is incomplete, my days are absolutely gray
-
-
Zedz
addikt
válasz honda 1993 #1671 üzenetére
Itt egy példa. A Kek mindaddig fekete marad, amíg össze nem tolod a jobb alsó részt.
Itt a media-query azt figyeli, hogy 500 pixelhez képest mekkora a rész amiben helyet foglal az oldal. Ha 500-nál nagyobb akkor nem történik semmi, ha 500-nál kisebb, akkor jelen esetben átszínezi a <h2> tartalmát.
-
DNReNTi
őstag
válasz honda 1993 #1673 üzenetére
Bakker.
Ez nem gyanús: media="print"?but without you, my life is incomplete, my days are absolutely gray
-
honda 1993
senior tag
Azt még valaki elmagyarázná nekem hogy pontosan hogy is fog működésbe lépni a responzive.css az oldalamon akkor amikor mobilról nézik?
Van egy ilyen Link a HTML-ben: <link rel="stylesheet" type="text/css" href="responzive.css" media="screen and (max-width: 500px)">
És ehez pedig már megírtam a css kódot is.Csak azt nem értem hogy ha telefonról nézik majd akkor hogyan fogja tudni beállítani az adott készülék hogy a mobil nézet töltődjön be.
XD alias IKSZDé
-
Zedz
addikt
válasz honda 1993 #1677 üzenetére
-
honda 1993
senior tag
Jólvanna, ez idáig is világos volt, csak azt nem értem hogy ha nekem 500px; van megadva, akkor az hogyan lehet hogy a telefonon automatikusan a mobil nézet jön be...
Hiszen a px; érték egy távolság, nem pedig egy méret.
Sorry a hülye kérdéseimért.Volna mégegy olyan kérdésem is hogy ezt : <link rel="stylesheet" type="text/css" href="responzive.css" media="screen and (max-width: 500px)"> vagyis az 500px; érték helyett mi lenne a leg ideálisabb ?
XD alias IKSZDé
-
Zedz
addikt
válasz honda 1993 #1679 üzenetére
Minden töréspontnak egy külön css fájlt szeretnél csinálni?
-
DNReNTi
őstag
válasz honda 1993 #1679 üzenetére
"a px; érték egy távolság, nem pedig egy méret."
Wat? Úgy értem, hogy érted?but without you, my life is incomplete, my days are absolutely gray
-
honda 1993
senior tag
-
Zedz
addikt
válasz honda 1993 #1682 üzenetére
Én nagyon jól tudom mit szeretnél csinálni, de lefogadom meg sem nyitottad azt a JSFiddle példát amit küldtem neked. Ezt a <link> tagbe írogatós dolgot pedig szerintem tedd a sarokba ha több töréspontot is szeretnél az oldalon, szvsz egyszerűbb lesz ezt 1 CSS fájlban kezelned.
-
honda 1993
senior tag
De megnéztem, csak én úgy érzem hogy nekem egyszerűbb lenne ebben a formában, márcsak azért is mert itt sikerült elérnem hogy ha kisebbre állítom a böngésző ablakát akkor működik a responzive.css fájl, és minden úgy néz ki ahogy elterveztem....
Van annak valami hátránya ha nem akarok több töréspontot? Én úgy érzem hogy az én oldalamra bőségesen elegendő lenne az amit már írtam nektek.
XD alias IKSZDé
-
Zedz
addikt
válasz honda 1993 #1685 üzenetére
Minél több töréspontot adsz hozzá, annál több kijelző méretre tudod optimalizálni az oldalt. Nem kötelező, nem is mindig kell, komplexebb oldalaknák fog ez előjönni. De ha működik minden akkor mi a kérdés?
-
honda 1993
senior tag
No de csak annyit tudunk, hogy akkor ha a gépen keresztül nézem meg a böngészővel, akkor úgy tűnik hogy műkodni fog.
én csak tartok tőle hogy akkor szembesülök majd valami hibával amikor megpróbálom telefonnal megnézni."Nem kötelező, nem is mindig kell, komplexebb oldalaknák fog ez előjönni." Nos az én oldalam szerkezete nem túl bonyolult, igazából egy amolyan "csempés" felülete van az egésznek, vagyis sok img_containert használok ,és ezekre kattintva töltődik be a tartalom.
XD alias IKSZDé
-
Sk8erPeter
nagyúr
válasz honda 1993 #1679 üzenetére
"az 500px; érték helyett mi lenne a leg ideálisabb ?"
Nincs ilyen, hogy ideális méret, olyan szélességekre optimalizálsz, amilyenre akarsz. Te találod ki, és tesztelgeted, hogy ahogy váltakozik a felbontás, hogy néz ki az oldal. Erre a böngészőkben található fejlesztőpanelt mindenképpen használd, hogy le tudd tesztelni. MÁR MOST kezdj el ismerkedni vele, és akkor jobban fogod talán érteni, hogy működik a dolog, hogyan váltakozik a stílus a felbontás váltakozásával. Ez amúgy eddigi próbálkozásaim alapján a FF-ban speciel jobban működik, mint pl. Chrome-ban (amikor Chrome-ban totál mindegy, hogy változtatom a szélességet, az oldal csak arányosan kisebb lesz, mintha kizoomolnék belőle, de a stílus nem nagyon változik, az elég zavaró tud lenni, volt már ilyen párszor)."Jólvanna, ez idáig is világos volt, csak azt nem értem hogy ha nekem 500px; van megadva, akkor az hogyan lehet hogy a telefonon automatikusan a mobil nézet jön be..."
Ezt a kérdést már csak azért sem értem, mert Zedz pontosan ilyenre mutatott neked példát, hogy ahol 500 pixel a maximális szélesség, ott az az adott stílus legyen érvényben.
Ezt a végtelenségig bővítheted például úgy, ahogy Zedz mutatta, ahogy fordfairlane linkelte neked a tutorialt, ahogy DNReNTi is próbálkozott átadni az üzenetet, meg mindenki, aki elég kitartó volt.
Melyik része nem világos?
Egyszerű példa: van X szélesség, arra így néz ki az adott div, van Y szélesség, arra így, van Z szélesség, arra meg amúgy. Lényegében ezeket változtatgatod, nincs benne különösebb mágia. Persze nem csak szélesség létezik, hanem más szempontok is, mint a többiek már írták.Egyébként nem kell minden egyes breakpointra külön-külön CSS-fájlt csinálni, lehet egy nagy CSS-fájlod is (vagy pl. több szélesség egy fájlban).
"Hiszen a px; érték egy távolság, nem pedig egy méret."
Hogy mi a büdös bráner van?Sk8erPeter
-
honda 1993
senior tag
válasz Sk8erPeter #1688 üzenetére
Hmm. Köszönöm, egy kicsit már kezdek magabiztosabb lenni és talán csak összehozom úgy hogy működjön rendesen.
Igazáboól ha főleg az a cél hogy a desktop nézet mellett legyen egy mobil nézet (responzive.css) akkor az előbb küldütt linkben található 500px;-es érték mekkora kellene hogy legyen?
Tudom hogyaz előbb is mondtátok hogy ezt így nem lehet elmondani, de csak a miheztartás végett. É npl az 500px;-t soknak érzem egy picit.XD alias IKSZDé
-
Sk8erPeter
nagyúr
válasz honda 1993 #1689 üzenetére
Teljesen attól függ, milyen felbontásról nézed. Tabletnél egyáltalán nem sok, bizonyos mobiloknál sok lehet (az enyém vízszintes felbontása pl. 480px), nagy kijelzővel rendelkező téglafónoknál nem biztos, sok rétegre kell gondolni. Mellesleg mivel óriásira növekedett az okostelók felhasználóbázisa, ezért nem véletlenül terjedt el a "mobile first" fejlesztési koncepció, ami szerint először a kisebb kijelzővel rendelkező eszközökre kezdünk el tervezgetni, aztán haladunk szép lassan felfelé. Persze lehet valahol a kettő közt is, hogy mindkettőt folyamatosan nézegeted. Ahogy érzed.
Na de nézd meg a korábbi egyszerű példát, itt fogd meg a középső rácsot, ami elválasztja a HTML, JavaScript paneleket a CSS, Result panelektől, és kezdd el jobbra húzni, ezzel összenyomva a Result területét, láthatod, hogy a betűszín 500px alatt pirosra változik (pedig korábban fekete volt). Kb. így néz ki, amikor különböző méretektől függővé téve változtatgatod a stílusokat. Ez alá beírhatsz még akármennyi szélességű/más paraméterű stílusdefiníciót is. Vágesz?Sk8erPeter
-
PumpkinSeed
addikt
válasz honda 1993 #1689 üzenetére
Ez volt a kurzusteljesítő beadandóm, nem a legjobb de szemlélteti, hogy mi a reszponzív oldal lényege, ha elkezded összehúzni akkor jobb esetben működik is.
Amúgy szerintem (bár az általam mutatott oldal légből kapott értékekkel dolgozik) nézegesd meg a legtöbbet használt mobil képernyő felbontásokat és az alapján old ezt meg. Egy kis kutató munka, megnézed melyek a legtöbbet használt telefonok azoknak milyen kijelzőjük van majd esetleg egy logout bejegyzésben közzé is tehetnéd, hogy ha már ennyit segítenek a többiek akkor nekik is legyen egy kis segítség.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
adam_
senior tag
Sziasztok! Webprogramozói kurzusra járok Németországba, és az elején az első hétbe már le kell adni egy komplett projektrevalót. Én ezt az oldalt készítgetem, lényeg, hogy minden egyszerű kezdeti 'tag" (szöveg,kép,videó,form..) szépen megformázva legyen rajta.
Valaki közületek, 5-10 percet szánna nekem arra, hogy az oldalt struktúraügyileg megvizsgálja valamely inspektorral? Nem tudom, hogy mennyire szép avagy "randa" a honlap mögött álló kódom.
Szívesen fogadom a kritikát, hasznos tanácsokat, amelyeket a jövőben elkerülve még jobb honlapokat tudok készíteni (és persze szép, átlátható sturktúrával a háttérben)
Előre is köszönettel,
Adam -
adam_
senior tag
Köszi, én sem értem már, hogy így hirtelen miért táblázatos rendezést alkalmaztam a form-ra, pedig már itt is, és máshol is sokszor láttam, mondták, hogy "szentségtörés" ez a módszer, és eléggé elavult.
Az őszintét megvallva, gyorsan össze kellett dobnom a form fület, ezért netről vettem az alapjait, valószínű egy jóval régebbi oldalt dobhatott ki arra a google, hogy "kontakt form", ahol és amikor még ez a módszer volt a best practice..
PumpkinSeed: Bootstrapet, vagy media queryket alkalmazva csináltad a responzív design-t?
[ Szerkesztve ]
Új hozzászólás Aktív témák
- BestBuy ruhás topik
- Ukrajnai háború
- TCL LCD és LED TV-k
- Autós topik
- Anyagi katasztrófára figyelmezteti az Apple-t a brit média
- CASIO órák kedvelők topicja!
- Gaming notebook topik
- Újabb lépést tesz a lineális tévézés felé az Amazon
- Kerékpárosok, bringások ide!
- eBay-es kütyük kis pénzért
- További aktív témák...
Állásajánlatok
Cég: Alpha Laptopszerviz Kft.
Város: Pécs
Cég: Ozeki Kft.
Város: Debrecen