Media query font setting not working on `360` screen width - html

Question

Basically, I am resetting all my font-size to work with all screen sizes. basically i am resetting to 10px.
the issue is, one of the query i am using here:
#media screen and (min-width: 321px) and (max-width: 480px) {
body {
font: normal 2.083333333333333vw/1 normal sans-serif;
}
}
Is not giving correct output to 360 screen size. since above sets from 321 to 480 - but not setting with 360 screen.
what is the wrong here?
Here is my full resetting to 10px to all view ports.
p {
font-size: 1.2em; //in all media it will be 12px.
}
#media screen and (max-width: 320px) {
body {
font: normal 3.125vw/1 normal sans-serif;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
body {
font: normal 2.083333333333333vw/1 normal sans-serif;
}
}
#media screen and (min-width: 481px) and (max-width: 640px) {
body {
font: normal 1.5625vw/1 normal sans-serif;
}
}
#media screen and (min-width: 641px) and (max-width: 768px) {
body {
font: normal 1.305483028720627vw/1 normal sans-serif;
}
}
#media screen and (min-width: 769px) and (max-width: 1920px) {
body {
font: normal 1vw/1 normal sans-serif;
}
}
UPDATE
What i expect is : whatever the view port size, the min-font size should be 10px.example (320px) and more than this view-port the font-size should be maxium 14px. how to make this?