Responsive web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. offering the same support to a variety of devices for a single website, content, design and performance are necessary across all devices to ensure usability and satisfaction Meaning: build a website that support (mobiles, tablets, ipads, laptops and pcs).
To start developing responsive websites you need to know three things
Fluid and flexible layouts
Flexible images
Css3 media queries
Fluid and flexible layouts
Fluid layout uses relative units instead of fixed units. Typically a fluid layout will use percentages instead of pixels, but any relative unit of measurement will work
Static
A static page layout (sometimes called a “fixed” layout or “fixed width” layout) uses a preset page size and does not change based on the browser width. In other words, the page layout might have a permanent width of 960 pixels no matter what. This is how web pages were traditionally built for many years until modern influences like media queries and responsive design were introduced around the start of the 2010s. Example: section{width:960px}
Fluid
Fluid layout often will fill the width of the page, no matter what the width of the browser might be. use precentages insted of fixed widths Example: section{width:60%}
Flexible images
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. example: To create scalable images, simply add the following code to your stylesheet: img { max-width: 100%; } or img { min-width: 100%; }
Css3 media queries
Css3 media queries allowes the content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen, tablet screen and computer screen) max-width : deffine the maximum width of the screen that will apply the media query @media only screen and (max-width: 1024px) { /* For small laptops screen and ipads: */ } @media only screen and (max-width: 768px) { /* For tablets and small ipads : */ } @media only screen and (max-width: 480px) { /* For mobile: */ } min-width : deffine the minimum width of the screen that will apply the media query @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 768px) { } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 320px) { } min and max width : deffine the minimum width and the maximum of the screen that will apply the media query @media screen and (min-width: 321px) and (max-width: 767px) { } Orientation: Portrait / Landscape Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation: @media only screen and (orientation: landscape) { body { background-color: lightblue; } }