A Responsive web design or pages is a structure of “cascading style sheets” that helps to a page responsive and its environment is based on Orientation, Platform and Screen Size.

• Orientation: – Orientation is depending into Screen or Devices. Screen Orientation is slightly different then devices Orientation. Some devices doesn’t have the capability to detect its own, but screen orientation is always have. For handle Orientation issue with CSS and Javascripts.
• Platform: – In which the web sites is going to implemented. It is an API through which a developer make a website very good and place integrated application where new functionality will show to user.
• Screen Size: – Its depend on devices which we can use like computer, ipad, mobile, etc.

 

The number of columns change at 620px and 800px, but style sheet defines more than 2 conditions (media queries). The more in depth analysis shows that this page (simple at first glance) has around 30 variants adjusted to the following resolutions: 1400px, 1300px, 1220px, 1210px, 1200px, 1150px, 1100px, 1050px, 1024px, 980px, 960px, 950px, 931px, 900px, 860px, 809px, 810px, 800px, 788px, 768px, 760px, 640px, 639px, 620px, 600px, 540px, 500px, 481px, 480px, 380px.

The aspect of creating responsive web design some points are going to be noticed:-

• Proper Layouts
• Flexible grids
• Good and Optimized Images
• Use of CSS media Queries.

Screen sizes and media CSS

# Mobile

only screen and (min-width: 480px)

# Tablet

only screen and (min-width: 768px)

# Desktop

only screen and (min-width: 992px)

# Huge

only screen and (min-width: 1280px)

 

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480×320 phones (Android) */ }

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800×480 phones (Android) */ }

@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

 

For iPhone

@media only screen and (min-device-width: 480px){}

For tablets

@media only screen and (min-device-width: 768px){}