Flexible Layouts
- Create layouts using Percentages
Here’s an example to use percentages to create a flexible layout for a container that adjusts its width based on the screen size:
/* CSS for a Flexible Layout with Percentages */
.container {
width: 90%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
.column {
width: 30%;
float: left;
margin-right: 5%;
background-color: #3498db;
color: #ffffff;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
/* Clear the float to prevent container collapse */
.container::after {
content: "";
display: table;
clear: both;
}
- Flexible Layouts with Grids
Here’s an example of creating a flexible grid layout using CSS Grid, which adjusts based on the screen size. In this example, the grid layout switches from a column layout to a row layout when the screen width is 768 pixels or more:
.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
- Layout Using Flexbox
Flexbox is a one-dimensional layout model, meaning it deals with arranging elements along a single line, either horizontally or vertically. Flex items are elements within a flex container. A flex container is created using the display: flex property as shown below:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
@media screen and (min-width: 768px) {
.container {
flex-direction: row;
}
}
CSS Rules in Web Design for Mobile Screens
With the increasing prevalence of mobile devices, designing websites that are responsive and visually appealing on mobile screens has become paramount. Mobile web design focuses on crafting websites that are responsive, adaptive, and optimized for mobile devices such as smartphones and tablets. Unlike desktop screens, mobile screens have limited space and touch-based interactions, demanding a different approach to design and layout. CSS allows designers to create visually appealing and user-friendly interfaces for mobile screens, ensuring optimal readability, navigation, and interactivity. CSS plays a crucial role in shaping the layout and design of web pages. In this article, we will explore essential CSS rules tailored for mobile screens, along with examples.
Table of Content
- Media Query
- Flexible Layouts
- Flexible Typography
- Fluid Images
- Touch-Friendly Interface
- Mobile-friendly Navigation
- Hidden Elements
- Consistent Padding and Margins
- Performance Optimization
- Testing
Contact Us