All about Responsive web designing ( RWD)

 RWD All Topics in a glance

-> Responsive web designing means any web-design or webpage, which works in different devices.

-> It can work differently in different devices.

-> RWD is an approach that makes a website usable in different devices.

1) Different types of devices :

whenever we are discussing about RWD, we are only concerned with the width of the application, application will grow in height based on whatever the content is.

It is okay to have overflow in the vertical axis as there will be vertical scroll. But horizontal overflow and horizontal scroll is usually not preferred.

2) Viewport

Viewport is the area of the screen where we can see our application/output.

Device screen is not equal to viewport. Vp is the part of the device screen.

3) Thumb rules for writing RWD in CSS:

4) About meta viewport tag in HTML:

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

5) CSS breakpoints

-> Categorising device type according to their width size.

->CSS breakpoints are used to adjust the styling of a web page to match the screen width of the device it is being viewed on. The most common breakpoints are based on the width of the device screen, but other criteria, such as screen resolution, can also be used. 

->A breakpoint is a point at which responsive web pages change their layouts. Breakpoints can be used to hide or show certain elements, change the font size, or even alter the site’s overall layout. 

6) Media query in CSS

-> we can write targeted CSS styles for specific breakpoints.

-> Media query means writing specific types of CSS for specific devices according to their break points.

-> Media query should always be written as the last style in the CSS file or else it will be overridden by other styles.

-> Trick : we can write our media queries in a separate CSS file and link that CSS to our HTML with the link tag just like how we link our normal CSS in the head section of the HTML "And" this link tag should also be written below the normal CSS link tag.

7) EXAMPLE OF MEDIA QUERY USED IN CSS

suppose we want to give padding in our mobile devices but not in laptop and tabs.

This is our HTML file:

-> we have 2 divs in our HTML code.

-> 1st div contains the img tag and some image.

-> 2nd div contains a p tag and some sample paragraph.

This is our CSS file:

This media query will only work for devices with max-width of 480px . 

Output for mobile device:

we can see the width of this device is 410 which is less than max-width 480, so the media query styling will work for this device.

As we can see the img container has got top and bottom padding of 10px & right and left padding of 30px.

Output for tabs/laptop devices:

No padding in tabs/laptop devices as width of the device is more than the max-width: 480px.