Trouble with media queries, nothing happens - html

Question

I got media queries working perfect on second html page with this code
#media only screen and (min-device-width: 200px) and (max-device-width: 1099px) {
.snebild img {
width: 50%;
max-width: 50%;
right: 2%;
}
.title {
margin-left: 4%;
position: absolute;
top: 10%;
}
}
But on my second page im trying to change the font size so it looks good on lower resolutions but using same code just changing to correct class and p element but nothing works.
#media only screen and (min-device-width: 200px) and (max-device-width: 1099px) {
.introus p {
font-size: 8px;
}
}
This is the HTML
<div class="introus">
<h2>Main Title</h2>
<h4>Second title</h4>
<p>Text to change size on when using lower resolution such as Iphones</p>
</div>

Answer 1

I assume you are testing it on a desktop device and not on a mobile device.
Try to change min-device-width to min-width that should work.
Correct me if I'm wrong.

Answer 2

You should use min-width instead of min-device-width because the main difference between width and device-width is that device-widths don’t always match the layout viewport of said device.
Changing that parameters the code works fine
#media only screen and (min-width: 200px) and (max-width: 1099px) {
.introus p {font-size: 8px;}
}
<div class="introus">
<h2>Main Title</h2>
<h4>Second title</h4>
<p>Text to change size on when using lower resolution such as Iphones.</p>
</div>