Media Query
A Media Query is a CSS technique used to apply
styles based on the characteristics of the device,
such as its screen size, resolution, or orientation.
Media queries are primarily used in responsive web
design to ensure websites look good on different
devices (desktops, tablets, and mobile phones).
Change Background Color for Different Screen Sizes
/* Default styles */
body {
background-color: white;
}
/* Apply when screen width is less than or equal to
600px */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* Apply when screen width is between 601px and
1024px */
@media (min-width: 601px) and (max-width:
1024px) {
body {
background-color: lightgreen;
}
}
Why Use Media Queries?
Make websites responsive for different screen
sizes.
Improve usability and accessibility.
Ensure a better user experience across devices.
How it Works
1 ⃣ The default layout displays content side by side
(text on left, image on right).
2 ⃣ On small screens (≤ 768px):
The navigation changes to a vertical list.
The hero section stacks with text above the
image.
These two <meta> tags are crucial for defining how
your web page is displayed and behaves, especially
on different devices and screen sizes. Let me explain
each one:
1. <meta charset="UTF-8">:
This tag defines the character encoding for the
HTML document.
charset="UTF-8" specifies that the
document uses UTF-8 character encoding.
UTF-8 is a widely used encoding that can
represent almost all characters in the world
(including special characters like accents,
emojis, symbols, etc.).
This ensures that text displayed on your
webpage will be rendered correctly, regardless
of the language or special characters used.
Why is it important? Without this, your page might
not properly display non-English characters,
symbols, or other special text.
2. <meta name="viewport"
content="width=device-width,
initial-scale=1.0">:
This tag controls how the page is displayed on
different devices, especially mobile devices.
width=device-width: This sets the width
of the webpage to match the width of the user's
device. So, if someone views your website on a
phone, it will automatically adjust to the width
of their screen.
initial-scale=1.0: This sets the initial
zoom level to 1, meaning that the page will be
displayed at its normal size when first loaded,
without any zooming in or out.
Why is it important? This tag is essential for
making your website responsive on mobile devices.
Without it, the page might not scale correctly on
smaller screens like smartphones, causing content to
appear too large or too small.
In summary:
<meta charset="UTF-8"> ensures that
your text is properly encoded and displayed.
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"> ensures that the
page adjusts its layout correctly for different
screen sizes, especially on mobile devices.
What is UTF-8 Character Encoding?
UTF-8 (Unicode Transformation Format - 8-bit) is a
character encoding standard that can represent
every character in the Unicode character set
using a variable-length encoding system. It is the
most widely used character encoding on the web
today.
Key Points of UTF-8:
[Link] All Characters:
UTF-8 can represent every character in the
Unicode standard, which includes:
o All alphabetic characters (like English,
Arabic, Chinese, etc.)
o Symbols (currency symbols, mathematical
operators, emojis, etc.)
o Special characters (accents, diacritics,
punctuation marks, etc.)
o And many more...
[Link] Length Encoding:
o UTF-8 uses 1 to 4 bytes to represent a
character.
1 byte for characters from the ASCII set
(which includes most common English
letters, numbers, and symbols).
2 to 4 bytes for characters outside the
ASCII set, such as non-English letters,
emojis, and other symbols.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Landing Page</title>
<style>
/* Reset default styles */
body, h1, h2, p, ul {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: orange;
text-align: center;
}
header {
background: #333;
color: white;
padding: 15px;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
.hero {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
}
.hero-text {
max-width: 500px;
text-align: left;
}
.hero-image img {
width: 100%;
max-width: 400px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: white;
text-decoration: none;
margin-top: 10px;
border-radius: 5px;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero {
flex-direction: column;
text-align: center;
}
.hero-text {
text-align: center;
background-color: red;
}
.hero-image {
margin-top: 20px;
display:flex;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-text">
<h2>Welcome to My Website</h2>
<p>This is a simple responsive landing page using HTML, CSS, and
media queries.</p>
<a href="#" class="btn">Learn More</a>
</div>
<div class="hero-image">
<img src="[Link] alt="Hero Image">
</div>
</section>
</body>
</html>