RWD is the future of the web. Any web application which is not going responsive way misses large number of mobile and tablet users who are increasing day by day.So here I am going to discuss how to create a responsive site which suites your needs.
If you are planning to create simple layout website Grids plays a very important role in rwd but they might not be as useful if you are building a very complex application. Any way we have got media queries in css which will help you develop rwd for any site.
Grid is your layout is chunked into proper ratio so the content will fit properly in different sizes.
Media queries are just css queries which will apply different css based on devise screen size . For example for desktop it applies different styles compared to mobile for the same class.
Through only css we create the magic and remember no new javascript is load based on size.
One can get confused by the variety of mobile resolutions we have now and how to support them all.
We have to code based on the device width and height and not its ppi(pixels per inch). For example iPhone and iPhone Retina has the same size and different ppi but it calls the web application with same size as device widths are same.
Normal break points can have at
Best way to write media queries because we can edit all styles for minimal and override as we go increasing of width.
They are lot of frameworks for rwd in the market but best I found in usefulness are
And if you need only grids the best out there are
If you are planning to create simple layout website Grids plays a very important role in rwd but they might not be as useful if you are building a very complex application. Any way we have got media queries in css which will help you develop rwd for any site.
Grid is your layout is chunked into proper ratio so the content will fit properly in different sizes.
Media queries are just css queries which will apply different css based on devise screen size . For example for desktop it applies different styles compared to mobile for the same class.
Through only css we create the magic and remember no new javascript is load based on size.
One can get confused by the variety of mobile resolutions we have now and how to support them all.
We have to code based on the device width and height and not its ppi(pixels per inch). For example iPhone and iPhone Retina has the same size and different ppi but it calls the web application with same size as device widths are same.
Normal break points can have at
- Mobile - 240px -568px
- Tablet - 568px -1024px
- desktop 1024 px -2048px
Best way to write media queries because we can edit all styles for minimal and override as we go increasing of width.
@media only screen and (min-width : 240px){
// Mobile styles
}
@media only screen and (min-width : 568px){
// Tablet styles
}
@media only screen and (min-width : 1024px){
// Desktop Styles
}
They are lot of frameworks for rwd in the market but best I found in usefulness are
And if you need only grids the best out there are
