What is CSS responsive web design?
Overview
Responsive web design is a technique to adapt web content to the user’s behavior and surroundings, such as screen size, platform, and orientation. In responsive web design, we use CSS and HTML to resize, hide, shrink, enlarge, or rearrange information to make it look excellent on any screen.
Responsive structure
The responsive structure of web pages is shown in the image below.
Make responsive images and videos using CSS
We use the following CSS properties to resize images and videos on the web.
Use relative units
To make an image or video responsive, we can assign a relative unit, such as 50%. Images and videos will be fluid due to this strategy, and they will be able to resize themselves regardless of the screen size.
Example
img {width: 50%;}
Here 50% width will make an image resize itself with respect to screen size.
Use media queries
A media query is a CSS3 feature that allows a website’s layout to adjust to various screen sizes and media formats.
Syntax
@media media type and (condition: breakpoint) {// CSS rules}
Example
According to the media query rule below, any device with a width of less than 400px will take up the entire width of the screen.
@media only screen and (max-width: 400px) {img {width: 100%;}}
Use max-width property
The max-width attribute specifies a maximum width for an element, and it prevents the width of that element from exceeding that value (but it can be smaller).
Example
img {max-width: 100%;width: 400px; // assume this is the default size}
If the image’s default width is 400px and the screen size is just 360 pixels, we won’t be able to see the entire image since there isn’t enough space. Setting the image’s max-width property to 100% reduces the image’s size from 400px to 360px. As a result, we’ll see the entire image on a smaller screen.
Use object-fit property
The object-fit CSS property specifies how an image or video should be scaled to fit its container.
img {width: 100%;height: 200px;object-fit: cover;}
The image maintains its aspect ratio and fills the supplied dimension by using object-fit: cover in this case. The image will be cropped to meet the above-mentioned dimensions.
Conclusion
On different devices such as computers, mobile phones, and tablets, responsive web design gives an optimal experience, easy reading, and easy navigating with minimal resizing. Responsive web design is a practical and cost-effective method of modern web design.
Free Resources
