#Responsive
👋 Developers! ❤️ Save for Later!
As frontend developers, we need to cater to users on different devices and screen sizes.
Take a look at this example of a website on a computer and a mobile phone. How would you implement it such that the image resolution is not compromised?
The HTML image element includes the srcset attribute, which specifies a set of image resources and their respective sizes for the browser to choose from.
The browser then selects the most appropriate image based on the user's device and display capabilities.
In this example, the browser can choose between 2 versions of the same image, each designed for different pixel densities.
If you want to display different pictures for different screen sizes, you can use the HTML picture element. It takes in one or more source tags and the browser will look for the first one where the media query matches the current viewport width.
The image element is required as the last child of the picture element, as a fallback option if none of the source tags matches.
This is the 1 minute sharing for today. Please give us a like, and share it with your friends!
#TinyFrontend #WebDevelopment #frontend #frontenddeveloper #frontenddev #frontenddevelopment #frontendwebdeveloper #frontendengineer #frontendengineering #frontendmasters #html #CSS
Watch video #Responsive online without registration, duration hours minute second in high quality. This video was added by user Tiny Frontend - 1 Minute Video Sharing 07 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 182 once and liked it 9 people.