How To Apply Specific Stylesheet Depends On Screen Resolution?

February 28, 2024 Post a Comment

I want script in html which will identify the screen resolution, and then depends on that I want to link respective stylesheet for the application. e.g. if the resolution is in bet

Solution 1:

Now add this line in your

Head tag

as like this

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // add this line in your head
</head>

More info

Used to CSS Media Queries

@mediaonly screen and (max-width: 600px) {

// here your stylesheet 
    }

More info Click here

Solution 2:

I would use a css media query for this.

This means you can have all your rules in one stylesheet, and share common rules. It also means you only have one file to update when you change things.

Solution 3:

Below is a good guide on how to do this

http://css-tricks.com/resolution-specific-stylesheets/

Solution 4:

It is possible like this:

var style = document.createElement('style');
if ($(window).width() <= 600 && $(window).height() <= 400) {
    style.src = 'mobile.css';
} else {
    style.src = 'normalweb.css';
}
document.body.appendChild(style);

Solution 5:

if you need to write some javascript functions for CSS intercepted by media queries, you can use this cool library: https://github.com/WickyNilliams/enquire.js

Html5 Manual