美文网首页
移动端常用@media screen跟字体大小

移动端常用@media screen跟字体大小

作者: 杜乡的AGG | 来源:发表于2016-08-09 17:06 被阅读0次

    iphone各版本@media screen###

    iPhone < 5:
    @media screen and (device-aspect-ratio: 2/3) {}
    
    iPhone 5:
    @media screen and (device-aspect-ratio: 40/71) {}
    
    iPhone 6 + iPhone 6 Plus:
    @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
        body .footer_placeholder{
            background-color: #fff;
        }
    }
    
    //iphone6
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (orientation: portrait)
      and (-webkit-min-device-pixel-ratio: 2)
        {
            body .container .item-bd .tools .btn{
                margin-top: 2.7em;
            }
        }
    
    //iphone6 plus
    
    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (orientation: portrait) 
      and (-webkit-min-device-pixel-ratio: 3)
        { 
            body .container .item-bd .tools .btn{
                margin-top: 2.2em;
            }
        }
    
    iPad:
    @media screen and (device-aspect-ratio: 3/4) {}
    

    移动端字体###

    @media screen and (min-width:321px) and (max-width:375px) {
        html {
            font-size: 11px;
        }
    }
    
    @media screen and (min-width:376px) and (max-width:414px) {
        html {
            font-size: 12px;
        }
    }
    @media screen and (min-width:415px) and (max-width:639px) {
        html {
            font-size: 15px;
        }
    }
    @media screen and (min-width:640px) and (max-width:719px) {
        html {
            font-size: 20px;
        }
    }
    @media screen and (min-width:720px) and (max-width:749px) {
        html {
            font-size: 22.5px;
        }
    }
    @media screen and (min-width:750px) and (max-width:799px) {
        html {
            font-size: 23.5px;
        }
    }
    

    字体大小

    @media screen and (max-width: 360px) {
                    html {
                        font-size: 90px;
                    }
                }
    html {
        font-size: 100px;
    }
    body * {
        font-size: 0.16rem;
    }
    

    相关文章

      网友评论

          本文标题:移动端常用@media screen跟字体大小

          本文链接:https://www.haomeiwen.com/subject/xdsdsttx.html