CODEWITHSUNDEEP
cssmedia-queriesscreen-resolution
user581157
user581157

Reputation: 1409

Apply css styles specific to screen resolution

How do i apply styles for differnt screen resolutions

For example: I have a computer with max screen resolution of 1366 X 768 and want to specify css styles only for this resolution .

Css @media rules only take into consideration min-width and max-width of the browser how do i target for specific resolution.

enter image description here

Upvotes: 1

Views: 2587

Answers (4)

Vishal Panara
Vishal Panara

Reputation: 243

You can try this

@media screen and (min-width: 1500px) and (max-width: 1600px){
    /*Your style */
}

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Use width and height mediaqueries

@media (width: 1366px) and (height: 768px) {
   :root { background: yellowgreen; }
}

to match a viewport of 1366x768 px

Codepen example

Anyway it's worth noting that, unless you are in fullscreen mode, that rule won't be applied because the UI of your browser takes some room, so the actual viewport can't be exactly the same of the chosen resolution.

Upvotes: 2

לבני מלכה
לבני מלכה

Reputation: 16251

Try this:

@media screen and (min-width: 1366px) and (max-width: 1366px)
              and (min-height: 768px) and (max-height: 768px) {
    /* style */
}

Upvotes: 2

billy.farroll
billy.farroll

Reputation: 1921

Use the resolution tag i.e. :

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

More explantations and syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

Upvotes: 1

Related Questions