Autor | Zpráva | ||
---|---|---|---|
Nikola Profil |
Dobrý den, učím se vytvářet webovky a momentálně dělám svůj první web. Zasekla jsem se ale u responzivního designu. Nerozumím tomu, jak to mám nyní upravit pro mobil a tablet. Snažila jsem se o tom hodně najít na internetu ale bohužel to nedokážu aplikovat na svůj web. Dokážete mi prosím někdo pomoci?
Odkaz na web: shakeit.wz.cz EDIT: Zkusila jsem to upravit takto, a pár věci se tím vyřešilo, ale pořád to není úplně ono. @media screen and (max-width: 480px) { body { width: 100%; height: 100%;} h1 { width: 100%; height: 100%;} h2 { width: 100%; height: 100%;} h3 { width: 100%; height: 100%;} img { width: 100%; height: 100%;} iframe { width: 100%; height: 100%;} div.Obsah { width: 100%; height: 100%;} div.Header { width: 100%; height: 100%;} div.Tabulka { width: 100%; height: 100%;} .Obrazek { width: 100%; height: 100%;} .Nazev { width: 100%; height: 100%;} .Navigace { width: 100%; height: 100%;} .KulatyObazek { width: 100%; height: 100%;} nav { width: 100%; height: 100%;} a { width: 100%; height: 100%;} ul li { width: 100%; height: 100%;} ol li { width: 100%; height: 100%;} } * { box-sizing: border-box; } body { background-color: rgb(242, 214, 224); display: block; margin : 0; line-height: 100%; /*výška řádku*/ padding: 5% 10% 5% 10%; } div.obsah { width: 90%; margin: auto; background-color: white; border-radius: 15px; /*zakulacené rohy*/ border: solid 2px; box-shadow: 10px 10px 5px #888888; /*stín*/ border-radius: 15px; } div.header { width: 90%; margin:auto; padding: 1em; /*šířka vnitřního okraje*/ background-color: white; text-align: center; margin-top: 10px; margin-bottom: 10px; border-radius: 15px; border: solid 2px; /*ohraničení*/ box-shadow: 10px 5px #888888; /*stín*/ } h1 { color: black; text-align: center; font-family: "Times New Roman", Times, serif ; font-style: italic; font-size: 300%; letter-spacing: .2em; /*mezery mezi písmeny*/ } h2 { text-align: center; font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 200%; letter-spacing: .2em; } h3 { text-align: center; font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 150%; letter-spacing: .2em; } p { text-align: center; font-family: "Times New Roman", Times, serif; font-size: large; } img { display: block; /*způsob zobrazení*/ margin-left: auto; /*šířka vnějšího okraje*/ margin-right: auto; } nav{ text-align:center; max-width: 100%; margin: 0; } a { text-decoration: none; color: black; text-align: center; font-weight: bold; /*tučně*/ } .Odkaz { text-decoration:underline; font-weight: bold; } ul li{ text-align: center; list-style: none; /*bez odrážek*/ font-size: large; font-weight: bold; } ol li{ text-align: center; } hr { color: black; } .KulatyObrazek { border-radius: 50%; /*poloměr zakulácení rohů*/ height: 300px; width: 350px; } .Navigace { text-decoration: none; color: black; text-align: center; font-weight: bold; background-color: rgb(242, 214, 224); display: inline-block; padding: .2em; width: 15%; line-height: 35px; border: 2px solid; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin: auto; } .Nazev { font-family: "Times New Roman", Times, serif; font-size: xx-large; font-weight: normal; font-style: italic; } .Obrazek { float: none; clear: both; clip: rect(auto, 100px, auto, auto); position: relative; } div.Text { border-radius: 50px; width: 300px; padding: 25px; margin: 25px; clear: both; } footer { padding: 1em; color: black; background-color: white; clear: left; text-align: center; border-radius: 15px; } iframe { display: block; margin-left: auto; margin-right: auto; overflow: hidden; } div.Tabulka { width: 400px; padding: 25px; margin: 25px; border: 1px solid black; text-align:center; margin-left: auto; margin-right: auto; } |
||
Kcko Profil |
#2 · Zasláno: 4. 1. 2017, 21:34:10
S čím konkrétně máš problém? Miminálně sniž hodnoty paddingu u tagu body ... (klidně vynuluj) ...
|
||
Nikola Profil |
#3 · Zasláno: 5. 1. 2017, 10:21:59
Kcko:
Pokud vynuluju padding tak se mi body roztáhne přes celou stánku a zmizí růžové pozadí |
||
Kcko Profil |
#4 · Zasláno: 5. 1. 2017, 10:33:14
Nikola:
Tak nech bezpečnou hranici, nemusíš to mít v procentech, něco jako 20px nestačí? Navíc mít tohle povešené na tagu body je zvláštní, řeší se to nějakým wrapperem, body se nechává pro něco jiného. Pokládám znovu otázku, co konkrétně Ti vadí v tvém responsivním designu? Základní principy a doporučení nalezneš třeba zde Responsivní design (zační číst články od konce) a pak to chce jen pilovat, zkoušet a tunit. A můžeš samozřejmě odkoukat techniky a řešení z jiných webů a taky samozřejmě záleží na zkušenosti a oku daného webdesignera jak se dokáže popasovat s responsivitou. |
||
Nikola Profil |
#5 · Zasláno: 5. 1. 2017, 19:32:27
Kcko:
No jak říkám, je to můj první pokus o web, takže co myslíš tim wrappem. No a vadí mi to, že když si tedy web zobrazím na mobilu, tak např. navigace se mi sice dá podsebe ale je to uplně na sobě a chtěla bych tam merezu, nebo když je víceslovný nadpis a slova se mi dají podsebe tak se to částečně trochu kryje takže tam taky asi nějak mezeru. A to nevím jakvyřešit. |
||
Kcko Profil |
#6 · Zasláno: 6. 1. 2017, 12:12:08
Nikola:
Wrapper je obalový div, kterému se nastavuje šířka a další věci, tag BODY se na to moc nehodí. Co se týká tvých další věcí, ty s responsivitou nesouvisí, jsou to základní věci v CSS, to na co se konkrétně ptáš margin (margin-bottom), line-height |
||
Nikola Profil |
#7 · Zasláno: 8. 1. 2017, 15:37:23
Kcko:
Aha, děkuju tím se mi to podařilo vyřešit. A nevíš prosím, jak udělám to, aby uživatel nemohl na mobilu stránku zvětšovat nebo zmenšovat? |
||
Keeehi Profil |
#8 · Zasláno: 8. 1. 2017, 15:55:22
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> nebo user-scalable=no
Značka <meta name=viewport> » Proč <meta> viewport?
|
||
Chamurappi Profil |
#9 · Zasláno: 8. 1. 2017, 18:02:23
Reaguji na Nikolu:
„jak udělám to, aby uživatel nemohl na mobilu stránku zvětšovat nebo zmenšovat?“ Proč bys něco takového chtěl dělat? Tím, že uživateli omezíš funkčnost, něco získáš? |
||
Kcko Profil |
#10 · Zasláno: 8. 1. 2017, 18:42:03
Chamurappi:
Nebud zvědavej, budeš brzo starej ;-) |
||
Nikola Profil |
#11 · Zasláno: 8. 1. 2017, 19:30:48
Keeehi:
Nevím proč, ale nejde mi to:/ |
||
Keeehi Profil |
#12 · Zasláno: 9. 1. 2017, 01:07:11
Nikola:
„Nevím proč, ale nejde mi to:/“ Tak děkujeme za informaci. |
||
Časová prodleva: 7 let
|
0