需求:
在各中移动设备屏幕中能完美适配,呈现方式不变(相对大小,边距等等)。
问题:
在开发过程中,如果使用”百分比“来布局,高度无法确定,在屏幕放大之后,margin-top通常会出现异常;
另外在不同屏幕中呈现的方式也会有所不同,特别是一些主要以图片为主的网页,因为宽度使用了百分比,但是高度无法使用百分比,倒是出现不等比例的缩放问题。
解决:
1.理解rem相对根节点的单位;
2.rem主要是通过html节点的fontsize确定的;
3.通过在js的window.resize事件中,动态的控制html节点的fontsize大小,来动态控制rem的比例;
4.以640的设计图为例,为了让图片能在不同的设备中高清展示,将所要切的图片都放大2倍,假如图片宽度为600px,那么高清展示就是1200px,由于我js设好的rem和html节点比例是1: 20 * (clientWidth / 320) + ‘px’;
所以600px宽度的设计稿图层(高清为1280px)在320宽度的网页中(其实都一样了,因为我们动态控制了rem的比例,我们只是以320为参考,这样好确定rem的大小,这就是为什么叫rem万金油)展示的rem单位就是600*2/2/2/20=7.5rem
目前存在的问题:
在移动端设备中,所有设备适配没有问题,但是如果放在pc百分百展示的话,图片边距就出现问题,我认为的是图片的大小已经到了极限,没有办法进行百分百填充覆盖,所以边距会出问题,以img标签出现的图片有问题,以background出现的图片没有问题,这也说明了img没百分百填充到div,从而出现了边距,解决的办法应该就是写死了img的宽高,另外vertical-align属性我不懂用啊
附上js代码:
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);