Responzivní design nefunguje – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Responzivní design nefunguje – CSS – Fórum – Programujte.comResponzivní design nefunguje – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
tribalcz0
Super člen
27. 8. 2013   #1
-
0
-

ahoj mám drobný probém ohledně resp. designu pomoci css a to ten ze to vubec nefunguje zkouseno na locahostu ve firefoxu v poslední verzi  

/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*Start css rules here.*/

html {
    background: #fff url('../img/bg.jpg');
}

body {
    font-family: Tahoma,georgia,verdana,arial,lucida,sans-serif!important;
    font-size: 80%;
    line-height: 1.4;
    color: #333;
}

img{
        max-width: 100%!important;
        height: auto!important;
}


/*heading*/

h1,h2,h3,h4,h5,h6 {
    font-family:"Arial";
    letter-spacing:0px; 
    text-align:left; 
    font-weight:normal;  
    text-shadow:#fff 1px 1px 1px;
}

/*heading end*/

/*media queries*/

@media handheld {
	body { font-size: 1em }
}
@media screen {
	body { font-size: 3em }
}

/*media queries end*/

kdyz se ve firefoxu nachazim v rezimu pro resp. design a zmenšuju tak to nic neudelá akorát to text resp. dve slova odelena mezerou hodi pod sebe pokud moc zmensim v resp. designu sem uplny novacek

Nahlásit jako SPAM
IP: 178.209.131.–
Reklama
Reklama
Flu0
Návštěvník
27. 8. 2013   #2
-
0
-

#1 tribalcz
Problém bych viděla tam, že režim pro responsivní design pouze mění šířku zobrazované oblasti (viewportu), prohlížeč se ale stále chová jako screen. Zkus ty @media předělat na omezení šířkou viewportu.

Nahlásit jako SPAM
IP: 93.157.132.–
tribalcz0
Super člen
27. 8. 2013   #3
-
0
-

ok díky tak toto zabralo  

/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*Start css rules here.*/

html {
    background: #fff url('../img/bg.jpg');
}

body {
    font-family: Tahoma,georgia,verdana,arial,lucida,sans-serif!important;
    font-size: 80%;
    line-height: 1.4;
    color: #333;
}

img{
        max-width: 100%!important;
        height: auto!important;
}

ul li {
    list-style-type: none;
}

/*heading*/

h1,h2,h3,h4,h5,h6 {
    font-family:"Arial";
    letter-spacing:0px; 
    text-align:left; 
    font-weight:normal;  
    text-shadow:#fff 1px 1px 1px;
}

/*heading end*/

/*media queries*/

@media (max-width: 640px) and (min-width: 0px){
        body{
                color: red;
                font-size: 300px;
        }
}

/*media queries end*/


a jen pro upresneni meta tag 

<meta
	name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1"
>


se používá jen pro potřeby mobilních přístroju s dotykovym dislejem a u stolního pc/noteboku nem bližší využití nebo se pletu??

Nahlásit jako SPAM
IP: 178.209.131.–
Flu0
Návštěvník
27. 8. 2013   #4
-
0
-

#3 tribalcz
Správně, na pc/notebooku je k ničemu - nastavuje to šířku a  "zoom" stránky na mobilních zařízeních (v tvém případě nastavuje na 100% a zakazuje přiblížení.

Nahlásit jako SPAM
IP: 93.157.132.–
tribalcz0
Super člen
27. 8. 2013   #5
-
0
-

dobře a ještě poslední věc html kod je treba nějak uproavovat nejspíš pro lepší pochopení sem nasel par webu  kde se jiste elementy jako obrazky apod skryvaji nebo je toto obsluhovane jen pomoci toho daneho css napr mam klasicke menu v rade  prizmenseni ma 767 * 640 se zmeni vzhled toho menu ale furt bude videt a pri zmenseni napr na 320 * 480 by menu zmizelo a misto nej by se objevila ikonka ktera by za pomoci js vysunula menu zhora toto se dela zasahem do kodu nebo staci pouze v css nektere úprvky oznacit jako display: none aby se nezobrazovaly

Nahlásit jako SPAM
IP: 178.209.131.–
Flu0
Návštěvník
27. 8. 2013   #6
-
0
-

Osobně si myslím, že co jde udělat přes CSS je lepší přes něj udělat. Zásah do kódu můžeš udělat jedině přes javascript, protože server neví, co máš za zařížení.

Nahlásit jako SPAM
IP: 77.48.21.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 48 hostů

Podobná vlákna

Design editor — založil Elited

Centrovaný design v IE — založil josi.ow

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý