Want to create websites that look better on all types of screens? Want to customize content with respect to screen sizes? These can be done with the help of breakpoints.
Breakpoints
Breakpoints are used in CSS (Cascading Style Sheets) to attain responsive design. These breakpoints are used to apply specific styles to specific screens. It is used in CSS with media queries. Breakpoint is a value of screen width at which the CSS style changes going to be applied. It provides the flexibility of design for various devices and scaling up the website audience.
Uses of Breakpoints
- Responsive Design: Responsive websites can be created using media queries and breakpoints
- Better user experience: Improving the user experience by providing suitable properties to various types of screens
- Adaptation: Creating the website adapting to all types of screens and providing its content properly
- Layout Customization: Making the layout customized to different users ( mobile, pc users )
Media Queries
Media queries are used in CSS to write specific styles to specific width (breakpoints) leads to responsive design. They select specific screen size devices using breakpoints and apply the styles to those screen sizes. The breakpoints are defined in media query using min-width and max-width values.
Syntax:
@media screen and (min-width: value ) and (max-width:value)
{
// Styles for the range of screen sizes
}
Types of Breakpoints
Breakpoints is classified into 2 main types. they are
1. Device breakpoints:
Throughout the world, People are using various type of devices with different screen sizes. Device breakpoints are splitted by type of devices. But each type has various brands and models which are not considered while designing.These breakpoints are defined by common device (Standard) resolutions. The common standard for device breakpoints are given below :
Note: These breakpoints are used in Bootstrap framework. So we can use same breakpoints for custom styling.
Device type | Resolution |
|---|---|
Mobile Devices | 320px - 480px |
IPads and Tablets | 481px - 768px |
Laptops | 769px - 1024px |
Large Screens and Desktops | 1025px -1200px |
Television and other larger screens | 1201px - above |
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoints</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Breakpoints example</h1>
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
</body>
</html>
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.card {
flex: 0 1 calc(25%);
background-color: #f0f0f0;
padding: 20px;
text-align: center;
border-radius: 8px;
border: 2px solid green;
}
h1{
text-align: center;
color:green
}
@media screen and (min-width: 1200px) {
.card {
flex: 0 1 calc(20%);
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.card {
flex: 0 1 calc(30%);
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.card {
flex: 0 1 calc(50%);
}
}
@media screen and (max-width: 480px) {
.card {
flex: 0 1 calc(100%);
}
}
Output:
Output
2. Content Breakpoints:
Sometimes, website layout relies on the content. Breakpoints depend on the content and elements of the website is called content breakpoints. For example, If a image becomes too large for a screen size, It is reduced to the lesser size. Also be applied on paragraphs, videos, div elements etc
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Content based checkpoints</title>
</head>
<body>
<div class="container">
<h2>GEEKS FOR GEEKS</h2>
<div class="text">
<p>GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for
programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants.
With a strong emphasis on enhancing coding skills and knowledge, it has become a trusted destination for over
12 million plus registered users worldwide. The platform offers a vast collection of tutorials, practice
problems, interview tutorials, articles, and courses, covering various domains of computer science.</p>
<p>Our exceptional mentors hailing from top colleges & organizations have the ability to guide you on a
journey from the humble beginnings of coding to the pinnacle of expertise. Under their guidance watch
your skills flourish as we lay the foundation and help you conquer the world of coding.</p>
<p>Our brand is built on the pillars of expertise, accessibility, and community. We strive to empower individuals
to enhance their programming skills, to bridge the gap between academia and industry, and provide a supportive
community to the learners. GeeksforGeeks is committed to promoting technological advancement and providing
opportunities for growth in the ever-evolving field of computer science.</p>
</div>
</div>
</body>
</html>
.container {
max-width: 1200px;
margin: 0 auto;
}
h2{
font-size: 25px;
text-align: center;
color:green;
}
.text {
padding: 20px;
border: 1px solid green;
}
@media screen and (min-width: 600px) {
.text {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
@media screen and (min-width: 1000px) {
.text {
grid-template-columns: 1fr 1fr 1fr;
}
}
Output:
Output
Breakpoint Strategies
Breakpoint strategies define how the user approaches the responsive design process. By these strategies we can use the media queries and breakpoints for responsive design in a specific manner. Some of the important strategies are:
- Mobile-First Approach: In this approach, The developer has to first the mobile design for the website and then use breakpoints to attain responsiveness over other devices.
- Desktop-First Approach: This approach first focuses on desktop screens and then other screen sizes are designed using specific breakpoints.
- Content-Driven Approach: In this approach, The Designing depends on the content rather than the device sizes.
- Min-Max Approach: Instead of selecting specific devices and designing, the breakpoints are selected approximately by the min-max functions and apply styles to it.
- Hybrid Approach: The combination of using different type of appraches is hybrid appraoch. For example, In certain cases, Content driven styles are needed on a mobile-first approach.
Practices to Avoid
- Overuse of breakpoints: Adding a wide range of breakpoints may decrease the performance of the web application.
- Using Non-Standard Sizes: There are various type of screen-sizes in each device type. So make sure that you are selecting a standard size
- Forgetting Orientations: Make sure that the design should look proper on both potrait and landscape orientation of devices.
- Fail to Test: After developing a web application, Before publishing or commercializing, Do proper testing on the application and rectify problems if any in other device types.
Conclusion
By using these breakpoints in media queries , users can attain responsiveness and customizing ability for their websites. This breakpoints in CSS helps in making websites that are not constant and vary according to the developers needs or user preferences. Responsive design is an important part in the web development. Understanding it and incorporating it into your website makes its more potential.