Chrome ブラウザで実験したところ、これが思いついたものです。
@media (min-width:273px)
{
.subheader
{
background-color:red;
}
}
@media (min-width:274px) and (max-width:341px)
{
.subheader
{
background-color:orange;
}
}
@media (min-width:342px) and (max-width:455px)
{
.subheader
{
background-color:green;
}
}
@media (min-width:456px) and (max-width:546px)
{
.subheader
{
background-color:yellow;
}
}
@media (min-width:547px) and (max-width:683px)
{
.subheader
{
background-color:grey;
}
}
@media (min-width:684px) and (max-width:781px)
{
.subheader
{
background-color:white;
}
}
@media (min-width:782px) and (max-width:911px)
{
.subheader
{
background-color:black;
}
}
@media (min-width:912px) and (max-width:1093px)
{
.subheader
{
background-color:aqua;
}
}
@media (min-width:1094) and (max-width:1242px)
{
.subheader
{
background-color:tan;
}
}
@media (min-width:1243px) and (max-width:1366px)
{
.subheader
{
background-color:blue;
}
}
@media (min-width:1367px) and (max-width:1517px)
{
.subheader
{
background-color:violet;
}
}
@media (min-width:1518px) and (max-width:1821px)
{
.subheader
{
background-color:indigo;
}
}
@media (min-width:1822px) and (max-width:2051px)
{
.subheader
{
background-color:purple;
}
}
@media (min-width:2052px) and (max-width:2732px)
{
.subheader
{
background-color:magenta;
}
}
@media (min-width:2733px) and (max-width:4102px)
{
.subheader
{
background-color:azure;
}
}
@media (min-width:4103px) and (max-width:5464px)
{
.subheader
{
background-color:brown;
}
}
質問に記載されているように、範囲は25%から500%です