Loading

移动端适配

实习期间主要在写微信端H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。

方法1:媒体查询

这是最笨工作量最大的方法了,就是一个屏幕尺寸一个屏幕尺寸的适配,当然你没办法适配到所有的手机型号,有的手机比较奇葩,同样是5.5寸,有的矮胖,有的瘦高。我的方法是以iphone6为准,然后向上适配5.5寸,向下适配4.7的iphone5,这个时候就能自适应市场上的一些主流屏幕,然后在对其他品牌手机挑一部分手动适配。

对于工作量小的项目,这个方法还是简单有效的,当然没办法覆盖所有设备,只是一个没办法的办法,这样做其实很痛苦,工作量也大。

方法2:定高不定宽

对于流式布局的页面,我们只要把宽度设置为百分比,而高度设置为px,这样宽度就可以自适应,高度由于是流式布局,损失一点美感,再搭配简单的媒体查询,不会对布局造成太大的影响。

不过我在工作中写的最多的是一些比较不常规的页面,比如下面的这个蛋和锤子都是用绝对定位放上去的,这个时候不管是宽度还是高度都得照顾到。

刚开始我为了让这颗蛋乖乖待在一个位置,用媒体查询写了好多位置和大小宽度,费时费力。

egg

方法3:神奇的 vh、vw

css3新增的单位,相对于视窗的宽度或高度,100vh代表整个可视区域,不包括标题栏状态栏底栏等区域,详细的可以看一下张鑫旭大神的文章 视区相关单位vw, vh..简介以及可实际应用场景

兼容性较差,有一些浏览器不支持,很明显微信内置的浏览器并不支持这个单位,扑街!

方法4:flexible

众里寻他千百度,蓦然回首,那人却在灯火阑珊处。

在很早之前找解决方案的时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配

当时工作赶得比较紧(其实是自己懒没仔细看),以为要用到grunt还需要打包发布,是用在手淘这种大项目,不适合自己捣鼓的小页面,所以就略过了......

后来找个时间好好拜读了之前的那篇文章,其实只需要导入一个 js 库就可以使用了。

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

原理文章里写得很清楚,我就不废话了。简单讲就是用 js 动态改变 <meta> 标签,然后用rem作为单位,因为rem就是根据font-size来做计算的,由此对不同屏幕尺寸进行适配。

神器。以后的项目应该都会使用这个方案。

博客首发地址:https://www.jianshu.com/u/13cd86311525

posted @ 2017-02-03 11:40  超超不会飞  阅读(1612)  评论(2编辑  收藏  举报