How to change the background color of a specific wide viewport with CSS
How to Change the Background Color of a Specific Wide Viewport with CSS
We can determine the device used for surfing by using the width of what we call the “viewport.”
In computer graphics, a viewport typically refers to the polygonal (usually rectangular) area that the user is viewing. When we talk about the viewport in a web browser, we usually mean the window above which content is visible, and outside of this window, the user cannot see content.
There are basically two types of viewports.
- The fixed viewport, on which the browser draws the entire web page, is called the layout viewport.
-
The portion of the layout viewport that is currently visible, depending on zoom or other factors, is called the visual viewport.
Screen Size
It basically refers to the physical width and height of the device. There are many devices with different screen sizes; based on the screen size, the way users interact with web pages also changes. So, what is the relationship between screen size and viewport width?
- Regardless of the device, users are more accustomed to vertical scrolling, which is why we use the viewport width to categorize devices, as the maximum width of the layout viewport is limited by the physical width of the device.
-
At this point, we know what “viewports” are and how they relate to screen size. If we want a responsive web page that changes style after a certain width, we must set the viewport using the meta viewport tag.
-
This tag tells the browser how it will handle the size and scaling of the page. The meta viewport value width=device-width tells the page to adjust its width in device-independent pixels to match the width of the screen.
Pages can utilize the full landscape width by adding a value of initial-scale=1, which instructs the browser to establish a 1:1 relationship between CSS pixels and device-independent pixels, regardless of the device’s orientation.
Example
The following is an example of setting the viewport using the device width and an initial scale of 1.
<!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
We already know that we can use viewport width to trigger style changes. Now we’ll discuss media queries in CSS. You can use media queries to apply CSS styles based on overall device type (such as print vs. screen) or other details (such as screen resolution or browser viewport width). We use media queries to do the following:
- Apply styles conditionally.
-
When we need to target any specific form of media
-
Or when we want to test or must monitor media status.
To use media queries, we must specify the media type we’re targeting and the functionality we want to achieve. We can also utilize logical operators to create more complex media queries. We can also use “not” to invert the meaning of a media query, which can be very convenient in some situations. Let’s look at an example of a media query.
@media print {
color: black;
font-size: larger;
}
The above media query will only apply to print media and will change the color to black and increase the font size.
Below is an example of a complex media query.
@media (min-width: 30em) and (orientation: landscape)
{Color: black;
Font-size: larger;
}
The above query applies the same styles, but only to media that is at least 30em in size and in landscape orientation.
Media Rules –
The section where we specify media types and media characteristics is often called a media rule.
The various logical operators that can be used in media rules are listed below.
- Not
- And
- Or
Example
Below is a sample code that uses media queries to solve the problem at hand.
<!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
Finally, by using media queries in CSS, you can change the background color on a specific wide viewport. You simply specify the viewport width and use it in your code to set a different background color for that specific viewport size. This will enable you to create an optimized website design for every device type and screen size, which is crucial for providing a good user experience.