繁体   English   中英

最小高度和最大高度的范围及其缩放级别

[英]Range of min-height and max-height with their zoom level

@media标签有助于定义屏幕的缩放级别。 例如,

@media(min-width:1165px) and (max-width:1366px){
    .subheader
    {
        position:fixed;
        top:8.5%;
        left:0%;
        background-color:;
    }
    .notices
    {
        margin-top:8%;
        margin-left:22%;
    }
}

当缩放级别约为125%时,将执行1165px至1366px的范围。 因此,谁能告诉我所有缩放级别的准确范围,例如25%,33%,50%,75%,90%,100%,125%,150%,175%,200%,250%,300%, 400%和500%。 我尝试使用Google搜索,但找不到任何有用的信息。

我在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%

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM