CSS Mobile Reset

Wednesday, November 17, 2010 { 12 Comments }



It should be small



It should reset only the necessary HTML elements



Should set only the necessary HTML elements



It should provide better typography solution



It should be small

Reset only the necessary HTML elements

Set only the necessary HTML elements

We should provide meaningful base typography solution



/* CSS Mobile Reset */

html, body

{

margin: 0;

padding: 0;

border: 0;

}



body

{

font-family:Arial, sans-serif;

line-height:1.5;

font-size:16px;

background: #fff;

padding:5px;

color: #000;

word-wrap: break-word;

-webkit-text-size-adjust: none;

}



h1, h2, h3, h4, h5, h6{ font-weight: normal; }



p img { float: left; margin: 0 10px 5px 0; padding: 0; }



img { border: 0; max-width: 100%; }



table { width:auto; border-collapse: collapse;border-spacing: 0; }



Responses to “CSS Mobile Reset”

I’m not sure if the title of this project should be called CSS Reset or CSS Set or CSS Mobile Base. The goal is to provide default CSS for mobile devices.I started with this objectives:Few years ago I build Hartija CSS Print Framework , the great thing about Hartija is that you have very fast print ready page. The same thing I want to achieve with the Mobile Reset to have content ready fast solution.Internet connection for mobile phones are still expensive and slow so smaller CSS file will provide faster download and better user experience.All the browser implement CSS reset by default. I don’t think that is always smart to reset the reset. If you building complete CSS Framework is OK to reset everything but in many cases it is better to reset just the main HTML elements or the critical HTML elements.After resetting some elements it would be nice to set some HTML elements optimized for mobile phones.We want to images not to be bigger than the mobile screen or if one word is bigger than the screen the word should brake.Have you tried reading from mobile phone without zooming? I suggest to start with bigger font size. I implement 16px default font size. Feel free to change it. I also picked Arial like default font. Sans-serif can work well in some older low resolution mobiles.And here is CSS Mobile Reset:You can use CSS Mobile Reset with combination of Bulletproof CSS3 media queries Any suggestions how CSS Reset can be improved?