I want to add CSS style based on screen resolution instead of Viewport.

Here is the case:
My screen resolution is (1980px x 1080px) and if I set Windows 10 "Scale and Layout" to 125% it changes the viewport of the screen and shows that viewport style.
I want to show my media style based on screen resolution, not the viewport.

Currently, I am using these media query for large resolution:

```
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

```

Can we achieve this using only CSS not JS?

Screenshots:

**Window 10 Scale 100%** :

[![Window 10 Scale 100%](https://i.stack.imgur.com/7ceCm.png)](https://i.stack.imgur.com/7ceCm.png)

**Viewport at Scale 100%:**

[![enter image description here](https://i.stack.imgur.com/L07vB.png)](https://i.stack.imgur.com/L07vB.png)

**Window 10 Scale 125% :**

[![enter image description here](https://i.stack.imgur.com/imYdn.png)](https://i.stack.imgur.com/imYdn.png)

**Viewport at Scale 125%:**

[![enter image description here](https://i.stack.imgur.com/EQsyC.png)](https://i.stack.imgur.com/EQsyC.png)