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

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

#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.

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??

#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í.

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

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í.