首页 > 代码库 > css响应式布局

css响应式布局

2024-10-10 01:27:39   214人阅读

 

以设计稿为准，假设设计稿竖屏宽度为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">

 

css响应式布局


联系
我们