css响应式布局
以设计稿为准,假设设计稿竖屏宽度为750px,取根元素的font-size为50px
在iphone6(375px)下,deviceWidth=7.5rem, 这个就是viewPort中的deviceWidth,
所以fontsize计算公式为 font-size=deviceWidth/7.5 即50px,因此我们可以设置iphone6下 html的font-size为312.5%
在该尺寸下的设备上,如果要设置某个p元素的字体大小为18px,可以设置成0.36rem
在iphone5s 320px,按比例换算,font-size=320/7.5=85.33 或者(320/375)*50px
可以使用下面这个方法动态计算根元素字体大小:
!function(){ var htmlEl = document.getElementsByTagName('html')[0]; var fitPage = function(){ /* The calculate of with from zepto */ var w = htmlEl.getBoundingClientRect().width; //返回一个DOMRect对象 w = Math.round(w); w = w > 750 ? 750: w; var newW = w/750 * 100; htmlEl.style.fontSize = newW + 'px'; } fitPage(); var t; var func = function(){ clearTimeout(t); t = setTimeout(fitPage, 25); } window.addEventListener('resize', func); }();
注:需要在html中有下面的声明,width=deviceWidth
<meta name="viewport" content="width=deviceWidth,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
- 上一篇 »响应式网页设计简单入门
- 下一篇 »CSS3多列布局与伸缩布局