移动端媒体查询适配

主要用于移动端内容适配,由于移动端有时候需要根据高度来进行适配,比如iPhone4和iPhone5的宽度一样,但是高度不同

/*iphone4*/
@media only screen and (max-width: 320px) and (max-width: 480px) {
html,body{
font-size: 12px;
}
}
/*iphone5*/
@media only screen and (max-width: 320px) and (min-height: 568px) {
html,body{
font-size: 14px;
}
}
/*ihpne6,7,8*/
@media only screen and (min-width: 375px) and (max-width: 413px) {
html,body{
font-size: 16px;
}
}
/*ihpne6,7,8Plus*/
@media only screen and (min-width: 414px) and (max-width: 640px) {
html,body{
font-size: 18px;
}
}

猜你喜欢

转载自www.cnblogs.com/Andrea-Li/p/9843654.html