RESPONSIVE WEB DESIGN – @MEDIA QUERIES (CSS)

Introduction:

Responsive web design adjusts to the requirements of users by accommodating various screen sizes, orientations, layouts, and devices. This is achieved through the implementation of flexible grids and layouts, images that respond to different conditions, and media queries in cascading style sheets (CSS).

Responsive web design:

Responsive web design is applicable to different device sizes. They are:

1. Mobile: 360 x 640 px
2. Tablet: 768 x 1024 px
3. Laptop: 1366 x 768 px
4. HD desktop: 1920 x 1080 px

It is a component of CSS that can written in the following ways:

• Example: The image below is the code at a 600px screen size:

• Output: The image below is the output of the code at different sizes:

For further reference read these materials:

• Tutorials point: https://www.tutorialspoint.com/html/html_responsiveness.htm

• Mdn web doc: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design#introducing_responsive_web_design