Sept 8, 2022
Responsive web design is a set of techniques that can be used to make sure that web pages render well on a number of different screen sizes. Content will fill a screen in an appropriate manner, no matter if the device is a phone, tablet, or computer screen.
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. We should include the following <meta> viewport element in all your web pages:
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head> It uses the @media rule to include a block of CSS properties only if a certain condition is true.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
This means that we must make some changes in our CSS.
Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px.
.container {
display: flex;
flex-wrap: wrap;
}