💡 This article will tell more about Html viewpoints and Media queries, and compare the two.
Going back to read through my Html journals and I found out that HTML's viewpoints can be set to take the width of any device if set to width-device-width. I was so confused to ask myself what is the use of a media query then? So I surf through different answers on the web to find out their uses and how we can use them for our projects.
So, let's jump into it HTML (Hyper Text Markup Language) is the standard language for creating web pages. It provides the structure and content of a webpage, while CSS (Cascading Style Sheets) is used to control the presentation and layout of the page. While, Media queries are a CSS feature that allows you to apply different styles based on the characteristics of the user's device or viewport, making your web page responsive and adaptable to various screen sizes.
Let's discuss HTML viewpoints and media queries in more detail:
- Viewport in HTML: The viewport is the visible area of a web page that the user can see within their browser window. In HTML, you can set the viewport meta tag to control how the content is displayed on different devices. The viewport meta tag is placed within the
<head>section of your HTML document.
Example of setting the viewport for responsiveness:
!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Page</title>
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html>
In this example, the viewport meta tag is set to width=device-width, which means the width of the viewport will be set to the device width. The initial-scale=1.0 ensures that the initial zoom level is set to 1, which means the webpage will appear at 100% zoom on the device.
In the context of web development, "viewport" refers to the visible area of a web page within the browser window. It represents the portion of the webpage that a user can see without having to scroll. The size of the viewport can vary depending on the user's device and screen resolution. For instance, on a desktop computer, the viewport may be larger, while on a mobile phone, it would be smaller due to the limited screen size.
- Media Queries in CSS: Media queries allow you to apply different CSS styles based on the characteristics of the user's device or viewport. This enables you to create responsive designs that adapt to various screen sizes, resolutions, and orientations.
Here's an example of using a media query to adjust the font size based on the screen width:
/* Default styles for all screen sizes */
body {
font-size: 16px;
}
/* Media query for screens with a width less than 600px */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Media query for screens with a width between 601px and 900px */
@media screen and (min-width: 601px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Media query for screens with a width greater than 900px */
@media screen and (min-width: 901px) {
body {
font-size: 20px;
}
}
In this example, the font size is adjusted based on the screen width. For screens with a width less than 600px, the font size will be 14px, for screens between 601px and 900px, it will be 18px, and for screens wider than 900px, it will be 20px.
By combining HTML's viewport meta tag with CSS media queries, you can create a responsive and mobile-friendly web page that adapts to different devices and screen sizes.
Media queries are a feature in CSS (Cascading Style Sheets) that allow web developers to apply different styles to a web page based on various factors, such as the characteristics of the user's device or viewport. By using media queries, you can create responsive web designs that adapt and display appropriately on different screen sizes and devices.
So, to summarize:
Viewport refers to the visible area of a web page within the browser window, and its size can vary based on the user's device and screen resolution.
Media queries are used in CSS to apply different styles based on characteristics like the viewport size, screen resolution, device type, orientation, etc. This allows for creating responsive web designs that provide an optimal viewing experience on various devices.