Responsive design using raw CSS is quite simple if you understand the basics. First, cover some fundamental concepts commonly used in responsive design. Then, you can proceed to learn more on your own.
Responsive Design You can follow this:
Viewport Meta Tag
CSS relative unit (em, percentage)
Responsive Image (Fluid Image)
Use of Max-width and Margin
Media Query (Responsive Split screen using flex or Grid)
Viewport Meta Tag
Check your HTML document includes the viewport meta tag in the head section.
CSS Relative Units (em, percentage):
em: The ’em’ unit is relative to the parent element’s font size. It’s commonly used for setting font sizes in a scalable and responsive manner.
Percentage: Percentage units are relative to the size of the containing block. They are widely used for defining widths, heights, margins, and paddings in responsive layouts, allowing elements to adapt to different screen sizes.
Responsive Image (Fluid Image):
A fluid image is an image that resizes itself based on the width of its container, maintaining its aspect ratio. This is achieved by setting the image’s width to 100% of its container’s width in CSS. Fluid images are crucial for responsive web design as they ensure images adapt to various screen sizes, preventing overflow or distortion.
Body Max-width and Margin Auto:
Set max-width for the body element to prevent content from stretching too wide on larger screens. Center the content horizontally using margin: 0 auto. (You can use it in your way)
Media Query:
Media queries are used for responsive design. To adapt the layout and styling of a webpage based on the characteristics of the device viewing it, such as screen size, orientation, and resolution.
Common breakpoints for various devices:
Extra Small Devices (Phones) – Less than 576px
Small Devices (Tablets) – 576px to 767px
Medium Devices (Desktops) – 768px to 991px
Large Devices (Desktops) – 992px to 1199px
Extra Large Devices (Large Desktops) – 1200px and above
These breakpoints can be used as a general guideline for creating responsive designs for different devices.
/* CSS Code */
}
Flex
Flexbox is a CSS layout model designed for creating flexible and responsive web designs with ease, offering powerful alignment control and simplified coding. It enables fluid resizing and reordering of elements, making it ideal for building layouts that adapt seamlessly to various screen sizes and devices.
display: flex;
flex-direction: row;
}
/* Responsive layout – makes a one-column layout instead of a two-column layout */
@media (max-width: 800px) {
.cart {
flex-direction: column;
}
}
Grid
CSS Grid is a powerful layout system in CSS that allows for creating two-dimensional grid-based layouts. It enables precise control over the positioning and alignment of elements in both rows and columns, offering flexibility and responsiveness in web design. CSS Grid simplifies the creation of complex layouts, making it a preferred choice for building modern, responsive websites.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
@media screen and (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr; /* Single column layout for smaller screens */
}
}
Tips: Practice some projects. It helps you build a good understanding of CSS design.
Thanks for reading 🩵⭐
