详解html5页面 rem 布局适配方法
程序员文章站
2023-11-16 17:06:16
本篇文章主要介绍了详解html5页面 rem 布局适配方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
... 18-01-12...
rem 布局适配方案
主要方法为:
- 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小;
- css 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 为单位的值;
- 设计稿中的字体使用 px 为单位,通过媒体查询稍作调整。
1 动态设置 html 标签 font-size 大小
精简通用版本:
!(function(win, doc){ function setfontsize() { // 获取window 宽度 // zepto实现 $(window).width()就是这么干的 var winwidth = window.innerwidth; // doc.documentelement.style.fontsize = (winwidth / 640) * 100 + 'px' ; // 640宽度以上进行限制 需要css进行配合 var size = (winwidth / 640) * 100; doc.documentelement.style.fontsize = (size < 100 ? size : 100) + 'px' ; } var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'; var timer = null; win.addeventlistener(evt, function () { cleartimeout(timer); timer = settimeout(setfontsize, 300); }, false); win.addeventlistener("pageshow", function(e) { if (e.persisted) { cleartimeout(timer); timer = settimeout(setfontsize, 300); } }, false); // 初始化 setfontsize(); }(window, document));
高配精确版本:
(function(win) { var setfontsize = win.setfontsize = function (_width) { var docel = document.documentelement; // 获取当前窗口的宽度 var width = _width || docel.clientwidth; // docel.getboundingclientrect().width; // 大于 1080px 按 1080 if (width > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docel.style.fontsize = rem + 'px'; // 误差、兼容性处理 var actualsize = win.getcomputedstyle && parsefloat(win.getcomputedstyle(docel)["font-size"]); if (actualsize !== rem && actualsize > 0 && math.abs(actualsize - rem) > 1) { var remscaled = rem * rem / actualsize; docel.style.fontsize = remscaled + 'px'; } } var timer; function dbcrefresh() { cleartimeout(timer); timer = settimeout(setfontsize, 100); } //窗口更新动态改变 font-size win.addeventlistener('resize', dbcrefresh, false); //页面显示时计算一次 win.addeventlistener('pageshow', function(e) { if (e.persisted) { dbcrefresh() } }, false); setfontsize(); })(window) //对h5活动推过页面,宽高比例有所要求,可适当调整 function adjustwarp(warpid = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width(); // 考虑导航栏情况 if (width / height < 360 / 600) { return; } width = math.ceil(height * 360 / 640); $(warpid).css({ height, width, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // 重新计算 rem window.setfontsize(width); }
2 通过 css3媒体查询设置 rem
简单易用 缺乏灵活度 请看demo 你懂的
@media screen and ( min-width: 320px){html{font-size:50px}} @media screen and ( min-width: 360px){html{font-size:56.25px}} @media screen and ( min-width: 375px){html{font-size:58.59375px}} @media screen and ( min-width: 384px){html{font-size:60px}} @media screen and ( min-width: 400px){html{font-size:62.5px}} @media screen and ( min-width: 414px){html{font-size:64.6875px}} @media screen and ( min-width: 424px){html{font-size:66.25px}} @media screen and ( min-width: 480px){html{font-size:75px}} @media screen and ( min-width: 540px){html{font-size:84.375px}} @media screen and ( min-width: 640px){html{font-size:100px}}
根据个人项目需求和产品设计可适当修改,以上demo写法并不唯一固定。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。