How to change background-color on a specific wider viewport in CSS ?

CSS Web Development Front End Technology

The method through which we can determine the device being used for surfing is by using what we call, “viewport” widths.

In computer graphics, a viewport usually indicates the polygonal (often rectangular) area that is now being viewed by user. When we talk about viewports in a web browser, we usually mean a window on which the content is visible and outside of which the user cannot view the content.

There are basically two types of viewports.

The viewport that is fixed and onto which the browser draws the whole web page is called the layout viewport.
The portion of the layout viewport which is currently visible depending on the zoom, or any other reason is called the visual viewport.

Screen-size

It basically means the physical width and height of the device. There are a number of devices with varying screen size; and based on the screen size, the way the user interacts with the web page changes. So, what is the relationship between the screen size and the width of the viewport.

No matter the device being used the user is more accustomed to scroll vertically and this is why we use the width of the viewport to categorize the devices as the maximum width a layout viewport can have is bound by the devices physical width.
At this point, we know what ‘viewports’ are, and how are they related to screen size. If we want to have a responsive web page that changes the style after a specific width, we have to set the viewport using the meta viewport tag.
This tag tells the browser how it will control the page’s sizing and scaling. The meta viewport value width=device-width informs the page to resize its width in device independent pixels to match the width of the screen.

The page can utilize the entire landscape width by adding the value initial-scale=1, which instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation.

Example

An example of setting up viewport with device-width and initial scale 1 is given below.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of Viewport</title>
</head>
<body>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque earum in  iste non animi itaque debitis sint! Repellat vero aliquid ullam. Aliquid  voluptates recusandae praesentium numquam reiciendis, ullam aliquam  nostrum!  </p>
</body>
</html>

Media Queries and Media Rules

As we are aware that we can use the viewport width to trigger style changes, we will now discuss the media queries in CSS. You can use media queries to apply CSS styles based on the overall kind of a device (such as print vs. screen) or other details like screen resolution or browser viewport width. We use media queries for the following things −

To conditionally apply styles.
When we need to target any specific form of media
Or when we want to either test or have to monitor media states

To use media query, we have to specify the type of media we are targeting and the features we are aiming for. We can also make use of logical operators to create a much complex media query. We can also use not to invert the meaning of a media query which is quite handy for some cases. Let us look at an example of a media query.

@media print {
   color: black;
   font-size: larger;
}

The above media query will get applied to only print type of media and change the color to black and increase the font size.

An example of a complex media query is given below.

@media (min-width: 30em) and (orientation: landscape) 
   {Color: black;
      Font-size: larger;
   }

The above query applies the same style but to media which are at least 30em in size and are in landscape orientation.

Media rules −

The part where we specify the type of media, and the media features is often termed to be as the media rule.

The various logical operators which can be used in the media rule are listed below −

Example

An example code which solves the problem at hand using the media query is given below.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <style>
      body {
         background-color: rgb(223, 241, 223);
         font-size: 20px;
      }
      @media only screen and (max-width: 750px) {
         body {
            background-color: aliceblue;
         }
      }
   </style>
</head>
<body>
   <h1>Example of media query to change background color</h1>
   <p>Please resize the browser window to see a change in background color. </p>
</body>
</html>

Conclusion

To conclude, by using the media query in CSS, you can change the background-color on a specific wider viewport. You just have to specify the width of your viewport and use it in your code to set a different background-color for that specific viewport size. This will allow you to create an optimized website design for each device type and screen size, which is essential for providing a great user experience.