Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use media queries in a mobile-first approach in HTML?
Building a responsive web design is a must have and a skill that every developer must be aware and know how to build a completely responsive nug free website. Which appears differently on different screen width devices and will not look oddly or overflow when opened on different devices. It is very important to know everything about building a mobile-first design starting from approach to build until the design is ready with no bugs and tweaks.
A responsive website must have a good user experience, user interface and design for all devices with same content. To build a fully responsive website you can use the CSS media query. Media query allows you to write different CSS for every single element on the web page for different screen sizes to show the same layout and the content differently on different devices.
These are two different approaches that you can follow while building a bug free fully responsive website. The approaches are listed below −
desktop–first design approach − In this approach of building a responsive website. You will first build the desktop version of the whole website, that means, the CSS in this approach is first written for the desktop and then it will be written for other devices.
mobile-first design approach − The mobile first approach, as the name suggests that the website will be built for the mobile first and then the CSS for mobile design will be overridden with the CSS for increasing width devices using CSS media queries.
Let us now understand the first approach to build a responsive web design, the mobile-first approach with its practical implementation using the code examples.
As we have already discussed that the mobile design will be build first in this approach. Hence, first we will write the CSS for the mobile design and the use media query to write CSS for bigger screen devices.
Let us see and understand it in details with the help of a code example.
Steps
Step 1 − In the first step, we will define all the required HTML elements like <img>, <p>, <h> etc. with suitable classes to provide them responsiveness in different screens.
Step 2 − In the next step, we will define a <style> tag inside the<head> tag of the document to write the mobile specific CSS first.
Step 3 − In the final step, we will write the CSS for other screen devices using media query to overwrite some of the mobile styles for bigger screens.
Example
The below example will explain how you can use media query to write CSS for mobile-first approach in HTML −
<!DOCTYPE html>
<html lang = "en">
<head>
<meta content = "width=device-width, initial-scale = 1" name = "viewport" />
<style>
/* CSS that will be applied on for mobile and Tablet devices */
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
p.para-text {
border: 2px solid black;
padding: 20px;
margin-bottom: 10px;
}
img {
width: 300px;
}
/* CSS that will be applied on devices with bigger screens */
@media screen and (min-width: 770px) {
.container {
flex-direction: row;
align-items: center;
column-width: 200px;
justify-content: space-evenly;
column-gap: 10px;
}
p.para-text {
border: 2px solid green;
padding: 30px;
}
img {
width: 200px;
}
}
</style>
</head>
<body>
<center>
<h2> Using media queries in a mobile-first approach in HTML </h2>
<p> The below web page will adjust itself for different screen width devices. </p>
<div class = "container">
<img src = "https://www.tutorialspoint.com/cg/images/logo.png" alt="Tutorialspoint Logo">
<p class = "para-text"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
</div>
</center>
</body>
</html>
In the above example, we have changed the way of showing the content on the different screens. In mobile and the tablet devices, the content is aligned in a single column with full width of each element. While in the bigger or desktop devices, content is visible in one single row with different columns for each content container element. In this example, not only the alignment of the content changing with different screen devices, but also the border color of the container which contains the text content also changes. We have followed the mobile first approach to implement all of this.
In this article, we have learned about how you can use the media queries in a mobile first approach to build responsive websites. We have discussed and seen the use of it in details by implementing it practically with the help of code example and see the results that how the content hierarchy will change when it renders on the different devices with different screens sizes.
76 Views
