Search code examples
htmlsizescreencompatibility

What's the best way to make my website compatible with all screen sizes?


I'm not even talking about mobile (just yet), I set widths and heights that are based on the pixel count of my laptop's display, but on my desktop 22" monitor, everything's out of place, div lines are too short (larger display, so it makes sense), etc.

I'm thinking I should use strictly percents, so instead of "width:200px", it'd be "width:64%", would that be a good solution?

Also, I see some websites, they adjust the content when you shrink the browser window (looks like an effect of "margin:0 auto", just keeping things centered), but also, when the width gets small enough, it just stops adjusting, it stops because moving any more and the content will start moving to lines below it in order to fit... How can I get this same effect?

Thanks!


Solution

  • This is done by making your site "responsive" which basically means that you use a grid system that scales and the screen size changes.

    There are a couple of frameworks out there that help with this. My favorite is Foundation (http://foundation.zurb.com/) but there are others like bootstrap (http://getbootstrap.com/)

    There is a ton of documentation on these sites you should focus on the grid sections: http://foundation.zurb.com/docs/components/grid.html

    Hope that helps.