阅读 214

移动端布局方式以及优缺点

1.百分比布局

使用百分比代替px.

优点:可以很好解决自适应需求。 缺点:不够灵活,添加元素时,需要修改其他元素的值。

2.rem布局

rem是基于页面跟元素的布局方式, 当手机屏幕大小改变了,只要改变对应的页面根元素,就可以实现页面的放大缩小。

优点:引入js后,通过动态修改根元素fontsize,根据手机屏幕 自动缩放 缺点:head中 就要引入js,会有一点加载影响

3.meta媒体查询

动态设置,几个手机的比例,进行对应匹配; meta标签,通过媒体查询 按照不同手机的像素宽高不同,进行条件匹配

优点:根据不同手机定制不同css,达到完美展示 缺点:需要写匹配很多手机,写很多套css,对前端工作量比较大

4.flex布局

优点:容易上手,根据flex规则很容易达到某个布局效果。 缺点:浏览器兼容性比较差,只能兼容到ie9及以上。

文章分类
前端
文章标签