How to use media queries in a mobile-first approach in HTML ?
We can organize our layout to suit a wide variety of different devices and their screen sizes and make it responsive using media queries. This variety is defined using 2 types of parameters, screen-width & orientation.
You can take two approaches to create a responsive website:
- Mobile-first approach: In this approach, the existing CSS is for the mobile view then you overwrite the existing CSS using media queries to fit the increasing width sizes.
- Desktop first approach: In this approach, the existing CSS is for the desktop view then you overwrite the existing CSS using media queries to fit the decreasing width sizes.
Here, we are focusing on how to make our website responsive using the former one, Mobile First Approach. This approach uses min-width media queries & landscape orientation.
Syntax:
@media (min-width: 640px) {
// CSS properties
}Example 1: This is the website initially and it is unresponsive.
HTML: This file contain only the HTML part
HTML
<!DOCTYPE html><html> <head> <title>Page Title</title> <link rel="stylesheet" href="style.css"></head> <body> <section> <img src= alt=""> <p>Jenny Doe</p> </section> <main> <h1>Geeks For Geeks Courses</h1> <p> Complete preparation package will help you learn 4 years' worth of programming knowledge in just 6 months! </p> <div class="projects"> <img src= alt="Project 1"> <img src= alt="Project 2"> <img src= alt="Project 3"> <img src= alt="Project 4"> </div> </main></body> </html> |
CSS: This file contains CSS without the media query.
CSS
* { box-sizing: border-box; font-family: "Mukta", sans-serif; color: rgb(10, 146, 10);} main { overflow-y: scroll; height: 100vh; padding: 40px;} body { margin: 0; display: grid; grid-template-rows: 260px 1fr; max-height: 100vh; overflow: hidden;} h1 { margin-top: 0; font-size: 24px; line-height: 1; text-transform: uppercase; margin-bottom: 12px;} p { margin: 0; font-size: 16px; font-weight: 300;} section { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 7vw; border-bottom: solid 1px #dbdce1; border-right: none; align-items: center;} section img { border-radius: 50%; width: 150px;} .projects img { width: 100%;} .projects { margin-top: 32px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; align-items: center;} |
Output:
Initial Webpage without media queries
Example 2: This is the website initially now using media queries.
HTML: This file contain only the HTML part
HTML
<!DOCTYPE html><html> <head> <title>Page Title</title> <link rel="stylesheet" href="style.css"></head> <body> <section> <img src= alt=""> <p>Jenny Doe</p> </section> <main> <h1>Geeks For Geeks Courses</h1> <p> Complete preparation package will help you learn 4 years' worth of programming knowledge in just 6 months! </p> <div class="projects"> <img src= alt="Project 1"> <img src= alt="Project 2"> <img src= alt="Project 3"> <img src= alt="Project 4"> </div> </main></body> </html> |
CSS: This file contains CSS with the media query.
CSS
/* Initial layout for desktop first */* { box-sizing: border-box; font-family: "Mukta", sans-serif; color: rgb(10, 146, 10);} main { overflow-y: scroll; height: 100vh; padding: 40px;} body { margin: 0; display: grid; grid-template-rows: 260px 1fr; max-height: 100vh; overflow: hidden;} h1 { margin-top: 0; font-size: 24px; line-height: 1; text-transform: uppercase; margin-bottom: 12px;} p { margin: 0; font-size: 16px; font-weight: 300;} section { display: flex; flex-direction: column; justify-content: center; align-items: center; /* display: block; */ margin-left: 7vw; border-bottom: solid 1px #dbdce1; border-right: none; align-items: center;} section img { border-radius: 50%; width: 150px;} .projects img { width: 100%;} .projects { margin-top: 32px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; align-items: center;} /* Media Queries */@media (min-width: 640px) { .projects { grid-template-columns: repeat(2, 1fr); gap: 40px; }} @media (min-width: 768px) { .projects { grid-template-columns: repeat(3, 1fr); gap: 50px; } h1 { font-size: 40px; } p { font-size: 18px; }} @media (min-width: 1024px) { .projects { grid-template-columns: repeat(4, 1fr); gap: 60px; }} @media (min-width: 640px) and (orientation: landscape) { body { grid-template-columns: 160px 1fr; grid-template-rows: none; } section { border-bottom: none; margin-left: -4px; border-right: solid 1px #dbdce1; } section img { width: 140px; }} |
Output:
Responsive Webpage with media queries
Please Login to comment...