CSS Media query for different devices -
i have basic css 2 column layout. works fine desktop browser resize liquid layout.
here code:
html:
<div id="wrapper"> <div id="headerwrap"> <div id="header"> <p>header part</p> </div> </div> <div id="contentliquid"><div id="contentwrap"> <div id="content"> <p>this body/content part</p> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> </div> </div></div> <div id="leftcolumnwrap"> <div id="leftcolumn"> <p>this left column</p> </div> </div> <div id="footerwrap"> <div id="footer"> <p>@copyright xyz corporation</p> </div> </div> </div> css:
body { font-family: verdana, arial, helvetica, sans-serif; font-size: 16px; color:#333 } p { padding: 10px; } #wrapper { width: 100%; min-width: 1000px; max-width: 2000px; margin: 0 auto; } #headerwrap { width: 100%; float: left; margin: 0 auto; } #header { height: 75px; background: silver; border-radius: 10px; border: 1px solid black; margin: 5px; } #contentliquid { float: left; width: 100%; } #contentwrap { margin-left: 250px; float: left; } #content { background: #ffffff; border-radius: 10px; border: 1px solid black; margin: 5px; } #leftcolumnwrap { width: 250px; margin-left: -100%; float: left; } #leftcolumn { background: silver; border-radius: 10px; border: 1px solid black; margin: 5px; } #footerwrap { width: 100%; float: left; margin: 0 auto; clear: both; } #footer { height: 40px; background: silver; border-radius: 10px; border: 1px solid black; margin: 5px; } .test{ height:200px; width:200px; border: 1px solid black; margin-left: 5px; margin-top: 10px; display : inline-block; } link of working fiddle : http://jsfiddle.net/fvlmx/324/ how can works in mobile devices/ i-phones/ tablets media queries or viewport.
what basic changes required ?
user
@media (min-resolution: 480px) { } for physically small devices, physically large devices , medium-sized devices have @
Comments
Post a Comment