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

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;
}