I've created the following html page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width" />
<style>
@media only screen and (max-width: 320px)
{
.text
{
font-size:0.3em;
}
}
@media only screen and (min-width: 321px) and (max-width: 480px)
{
.text
{
font-size:0.6em;
}
}
@media only screen and (min-width: 481px) and (max-width: 600px)
{
.text
{
font-size:0.9em;
}
}
@media only screen and (min-width: 601px) and (max-width: 768px)
{
.text
{
font-size:1.2em;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px)
{
.text
{
font-size:1.5em;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1200px)
{
.text
{
font-size:1.8em;
}
}
@media only screen and (min-width: 1201px)
{
.text
{
font-size:2em;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="text">
text text text text
</div>
</form>
</body>
</html>
when I zoom in from 100% to 500% using the broswer default steps (100%, 110%, 125%, ...) the font size increases in the few first steps and then decreases in some of the following steps in an inconsistent manner. this happens in all major browsers: - chrome 51.0.2704.103 - ie 11 - firefox 43.0.1 any help will be appreciated thanks
Zoom makes the font bigger. Your media query makes the font smaller. These two fight each other.
This happens because when zoom makes pixels larger, fewer pixels fit in the window, and this makes media queries for smaller windows match.
This behavior is specific to desktop browsers. Mobile browsers don't use window size for media queries, but screen size instead (roughly).
In other cases where font sizes are weird, it could be because of text-size-adjust.