What is a Responsive Website?

Responsive websites adapt to all devices and screen sizes, whether it's a desktop, laptop, tablet, or a smartphone, by automatically changing to the screen size. We accomplish this by utilizing CSS and a variety of parameters to provide the greatest possible user experience. We'll go over the fundamentals of Media Queries and CSS Units to help you grasp

Media Queries

You use media queries to apply conditions to your CSS. Depending on the capabilities of a device, you tell the browser to add or remove specific CSS rules. We'll need to alter our layout as the screen size changes. As the screen size shrinks, it's usually arranged vertically The syntax for a media query looks like this:

 @media <media-type> and (expressions) {
 CSS code;
}

@media informs the browser that a media query is about to begin
The media-type specifies the sort of device rules that will be applied. For example, we can put a "screen" of the media type here. This is a user-selectable field. If we don't use it, all devices will be subject to the rules
(expression) might refer to the device's breadth or orientation
We can specify some CSS rules that should be implemented inside the media query

Important Responsive Design Breakpoint Values in CSS

There are five major device sizes to be aware about:

Mobile portrait
Mobile landscape
Tablet portrait
Tablet landscape
Laptop

These devices translate to the following pixel values:

Mobile portrait: < 600px
Mobile landscape: < 900px
Tablet portrait: < 990px
Laptop: >1280px

These are some of the most common media queries I use:

    @media (max-width: 600px){
     }
    @media (max-width: 800px){
     }
    @media (max-width: 900px){
     }
    @media (max-width: 990px){
    }
    @media (min-width: 1280px){
    }

Media Queries for Advanced Responsive Design

Tool for testing the responsiveness of a website: links are provided below (Websites must be online or be on a hosting platform)

Basic Responsive Websites

In this article, I'll go through some basic concepts for implementing a responsive design for your website in an easy-to-follow manner.

Table of contents