CSS media Queries
The Media query in CSS is essential for crafting responsive web designs. It ensures that web pages adapt to various screen sizes and device types. Breakpoints are set to define when the content starts to adjust or change layout based on the device’s width.
Media queries can be used to check many things:
- width and height of the viewport
- width and height of the device
- Orientation
- Resolution
Syntax
@media not | only mediatype and (expression) {
// Code content
}
Example: In this example, we will use screen size in a media query to make the webpage responsive according to different breakpoints.
<!DOCTYPE html>
<html>
<head>
<title>w3wiki</title>
<style>
.gfg {
font-size: 100px;
font-weight: bold;
color: green;
text-align: center;
}
.geeks {
font-size: 50px;
text-align: center;
}
p {
font-size: 25px;
text-align: justify;
}
/* styling for screen width less than 800 */
@media screen and (max-width: 800px) {
body {
background-color: aqua;
}
.gfg {
font-size: 50px;
}
.geeks {
font-size: 25px;
}
p {
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="geeks">HTML Introduction</div>
<p>
HTML stands for HyperText Markup Language. It is
used to design web pages using a markup
language. HTML is a combination of Hypertext and
Markup language. Hypertext defines the link
between web pages. A markup language is used to
define the text document within the tag which
defines the structure of web pages. This
language is used to annotate (make notes for the
computer) text so that a machine can understand
it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The
language uses tags to define what manipulation
has to be done on the text.
</p>
</body>
</html>
Output: Background color and font size transition for width less than 800px.
Note: Sometimes, this method doesn’t show the correct output on Google Chrome.
HTML Responsive Web Design
HTML Responsive Web Design is a smart way of designing web pages to look great on any device. It’s all about making HTML elements adjust themselves, like resizing or hiding, based on the device’s screen size. This ensures that no matter if someone’s using a phone, tablet, or computer, the web pages will always look good.
We will show you various examples of how to create an HTML responsive web design that adapts perfectly to different screen sizes.