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
Post a Comment