Always try to follow these key points to design responsive layout.
1.Do not use fixed width or height.
2.if needed, use percentage(%) for width or max-width
property.
.container{
width:80%;
max-width:45rem;
}
or
.container{
width:min(80%,45rem);
}
3.if needed, use min-height
property.
4.Avoid using px
unit, try to use em
,rem
,ch
,ex
unit.
5.Ensuring make the image responsive.
img{
max-width:100%;
}
6.@media query
->Always try to put media query at the very last of css.
->Always use media query from smallest to biggest devices.
->To reduce complexity, use less number of media query.
->The less break points(@media query) you have, the easier the webpage to maintain.
Summery
- Website are responsive before we right any css.
- When our layouts run into issues, we're at fault in our css style, we have done wrong in our own css.
- Desktop-first approach is the main culprit.
- Writing mobile-first css tends to be the easier approach, even if you have a desktop layout.
N.B: The course is completely free, you can find the course from this link
course link
Top comments (0)