Last updated on March 9, 2020
As we all know that responsive design is the must criteria for building any interactive projects. I share a blog about how I used Viewport specific CSS Styling in my projects that improved my maintenance cost
Viewport Specific CSS Styling
- Media Query
- link tag
1. Media Query
Yes, this is the way we mostly prefer for targeting different viewports but within the single CSS file.
// style.css
@media only screen and (max-width: 700px) {
// Targets handheld devices, tablets.
}2. Link
There is another way of targeting different viewports for using style sheets but with a link tag.
Doing this way we can segregate our styling to viewport specific. Thus reducing much complexity of maintenance in the future.
<html>
<head>
<title>Learning Responsive Style Sheets</title>
<link rel="stylesheet" src="tablet.css"/>
</head>
<body></body>
</html>From the above code snippet, we can import the view port-specific style sheet but comprised of styles only for up to tablet devices.
But simply by doing this, will not work. Whereas media attribute plays a vital role here. That brings the power of combining media query syntax from style sheet to linktag.
<link rel="stylesheet" src="tablet.css" media="only screen and (max-width:767px)" />I have personally experienced the above approaches and I shared those with you.
If this helped you, then please share this article among your contacts. You can also ping me if you have any queries and help needed.