CSS media queries are an excellent way of changing your CSS for any device, tablet, or smartphone to create a better user experience and look of your website. Media queries can target your CSS for different screen sizes, orientations, and/or resolutions so that your content is easily readable while ensuring that user layouts are maintained between screens such as desktops tablets and smartphones.
filename.css
/*for mobile*/
@media only screen and (max-width:767px) {}
/*for tablet*/
@media only screen and (min-device-width:768px) and (max-width:1024px){}
/*for tablet landscape*/
@media only screen and (min-device-width:768px) and (max-width:1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)
{}
Why Media Queries are Important:
- Better UX: Change your designs, fonts, and so on so your website not only looks like but also acts well on every device user.
- Better Performance: Load all styles or resources for every device, on every device.
- Efficiency: One responsive website is now the only, and effective, version instead of mobile and desktop sites.
Conclusion:
Using media queries are paramount for modern web design. This will make your website responsive, mobile friendly, and good looking in a responsive design and drastically improve both the user experience as well as the overall performance of your site.
