移动端适配解决方案
- 通过媒体查询和css的media queries
- flex弹性布局
- 百分比加媒体查询。
- rem方式:@
flex布局的关键:文字流式,控件弹性,图片等比缩放。在某些比较小的屏幕可以做响应调整。iphone 4去调整padding,左右布局变为上下布局。
rem:相对于根元素(html)的字体大小,1rem = html标签的font-size,通过媒体查询的方式动态改变html,font-size的大小。
@media screen and (min-width:750px){
html{
font-size:50px;
}
}
.adapter(@width) {
@media screen and (min-width:@width) {
html {
font-size: round(@width/15,2)
}
}
}
.adapter(320px);