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