方法一
第一步:设置初始rem
css file:
html{ font-size: calc(100vw/7.5); }
说明:
如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem 如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem
100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。
第二步:全局px替换为rem
替换html中的px为rem,注意rem=px/100,即font-size: 12px,需要写成font-size: .12rem,其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位,遂当设备宽度改变时,采用rem布局的大小均会跟随相同比例变化,从而实现整体缩放。
方法二
使用js实现,参考网易移动版
// JavaScript Document (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=750){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
下面总结下网易的这种做法:
-
- 先拿设计稿竖着的横向分辨率除以100得到body元素的宽度
- 播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!
原创文章,作者:管理员,如若转载,请注明出处:http://www.bajiege.com/archives/908.html