join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW
css: casscading style sheets

Responsive Web Design w3c



Media Queries


You are probably familiar with Media Types, which allowed for separate CSS for various media including a Media Type for Handheld. Media Types did not seem to catch on for cell-phones, and were not even supported on some. With CSS3 we have Media Queries, which goes one step further, and are supported on all current browsers (March 26, 2011). The Media Type information can still be included within the Media Query.

Media Queries can be used to insure that your site will work correctly regardless of the user's screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, ipad, cell phone etc.

Breakpoint


I suggest that you create breakpoints at the following stages

@media screen and (max-width:980px)

@media screen and (max-width:768px)

@media screen and (max-width:600px)

@media screen and (max-width:480px)