javascript - css layout get distorted when zoom in -


page adjust according screen resolution stackoverflow problem zooming , css layout distorted when zoom in. i'm new in css , first , big problem facing when zoom in or out page distorted. want page fits every resolution. please give me such solution can apply on whole page including body , footer

html:

<div class="wrap">     <div id="head">         <div id="head_back">         <b id="logo">logo</b>         <div id="nav">             <b>2000</b>             <b>2001</b>             <b>2002</b>             <b>2004</b>         </div>         </div>     </div> </div> 

css:

.wrapper{width:100%; background-color:red; overflow:auto; margin:0; padding:0;} #head {     width:100%; height:100px;      color:#902df3;     position:relative;     top:-10px;     left:-7.8px;     font-family:"arial black", gadget, sans-serif;     padding-right:17px;  } #head #head_back {     position:absolute;     line-height:90px;     top:0;     left:0;     width:100%;     height:100px;     background:#999; background-size:cover; background-repeat:no-repeat;  } #head #logo {     font-size:46px;     position:absolute;   } #head #nav {     font-size:26px;     position:absolute;     left:60%;    } body html { position: fixed; width: 100%; overflow:scroll; } 

first of all, should have viewport meta tag:

<meta name="viewport" content="width=device-width, initial scale=1.0"/> 

then can use media queries:

@media screen , (max-width: 320px) {   ... } 

check out resource on media queries: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -