Sometimes ago, I came across a post on the web that says " If you have to write many media queries and CSS to create a responsive web pages, then the design is faulty." I agree with this principle. With few lines of CSS, you can create responsive web pages adaptable to any device using CSS flex and common tricks. In this post, the reader will learn how to create responsive web pages with fewer lines of CSS code. This post assumes the reader knows the basic of CSS and CSS flex
Table of Content
- Introduction
- Relative Units
- Responsive design & CSS Flex box layout
- Conclusion
Introduction
Responsive web pages target the width of the device and not the height. It is natural to scroll up a web page but unnatural to scroll side ways. Scrolling sideways leads to poor user experience. So the hack of responsive web pages is to focus on the width of the html elements and make it adapt to the width of any device.
The first step in developing responsive web pages with few CSS code and media query is to start with mobile version first. A developer might be tempted to start with the desktop version because of the development environment, such as laptop and desktop. Later on, the developer writes media query to adapt to mobile devices. Experience have shown that this is a tedious process. So remember mobile first.
The second is to set the device viewport in the html head.
<head>
<meta name='viewport' content='width=device-width,intial-scale=1.0' >
</head>
The above will control dimension and scale of the web page read more about viewporthere
Relative Unit
One major hack of responsive web design is to use relative unit for the width of the element instead of fixed unit. Remember, responsive design is about the width of the device. Relative unit scale very well. Fixed unit don't change. Example of fixed unit are
-px
-cm
-pt etc.
relative unit are
-rem
-em
-%
-vh
-vw etc.
Read more about relative unit.
rem unit are relative to the font size of the root html while em are relative to the font size of the nearest parent element. rem provides better control than em.
html{
font-size:16px;
}
2rem= 32px
Another hack is to set the width of images and form elements such as input, button in percentages. The elements will scale nicely on any device.
img{
width:100%;
height:10rem; /* 160px */
}
input{
width: 60%;
}
button{
width:30%;
}
CSS flex box layout has made responsive web design easy. On mobile version set your flex box direction to column. All the element in the flex container will be displayed stacked on one another. On larger devices, you can set the flex direction to row, to display element side by side.
Mobile version
div{
display:flex;
flex-direction:column;
width:100%;
}
@media screen and (min-width:1000px){
div{
display:flex;
flex-direction:row;
}
}
Another hack is to set the flex-flow property of the flex box to row wrap. The element inside the flex box will stack on one another or flow side by side depending on the width of the element.
div{
display:flex;
flex-flow: row wrap;
}
Conclusion
It is most likely that your web page will be viewed on mobile device. In November 2022, about 50 percent of internet traffic came from a mobile device. This figure will continue to rise. Hence, it is imperative to develop a website that will adapt to most devices. The objective of this post is to enable developers to design responsive web page with ease.
If you find this post educative, comment and like.
Top comments (0)