cssrem适配,css rem布局
rem 布局适配方案
主要方法为：
按照设计稿与设备宽度的比例，动态计算并设置超文本标记语言根标签的字体大小大小；钢性铸铁中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为雷姆为单位的值；设计稿中的字体使用像素为单位，通过媒体查询稍作调整。1 动态设置 html 标签 font-size 大小
精简通用版本：
！(function(win，doc){ function setFontSize() { //获取窗户宽度//zepto实现$(窗口)。宽度()就是这么干的可变窗口宽度=窗口。内部宽度；//doc。documentelement。风格。font size=(win width/640)* 100 px ；//640宽度以上进行限制需要钢性铸铁进行配合var size=(赢宽/640)* 100；医生。文档元素。风格。字体大小=(大小100？大小：100) px ；}赢中的var evt= onorientationchange ？方向改变":"调整大小；var timer=nullwin . addevent listener(evt，function(){ clear time out(timer))；timer=setTimeout(setFontSize，300)；},假);win.addEventListener(pageshow ，函数(e){ if(e . persisted){ clear time out(timer)；timer=setTimeout(setFontSize，300)；} },假);//初始化设置fontsize()；}(窗口，文档));高配精确版本：
(function(WIN){ var set font size=WIN。set font size=function(_ width){ var docEl=document。文档元素；//获取当前窗口的宽度var width=_ width docel。客户端宽度；//docEl.getBoundingClientRect().宽度；//大于1080像素按1080如果(宽度1080){ width=1080；} var rem=width/10；控制台。对数(雷姆)；多西。风格。font size=rem px//误差、兼容性处理var actualSize=win。getcomputedstyle解析float(win。getcomputedstyle(docEl)[ font-size ])；if (actualSize！==rem actualSize 0 math。ABS(actualSize-rem)1){ var rem scaled=rem * rem/actualSize；多西。风格。font size=rem scaled px} } var定时器；函数DBC刷新(){清除超时(定时器)；timer=setTimeout(setFontSize，100)；} //窗口更新动态改变字号赢了。addevent侦听器( resize ，dbcRefresh，false)；//页面显示时计算一次WIN.addEventListener(pageshow ，function(e){ if(e . persisted){ DBC刷新()} }，false)；设置fontsize()；})(窗口)//对H5活动推过页面，宽高比例有所要求，可适当调整函数adjust warp(warpId= # warp ){ const $ win=$(window)；const height=$ win。height()；设width=$ win。width()；//考虑导航栏情况如果(宽/高360/600){ return；}宽度=数学。天花板(高度* 360/640)；$(疣猪).css({高度，宽度，位置：相对，顶部：0，左侧：自动，边距：“0自动 });//重新计算rem window.setFontSize(宽度);}2 通过 CSS3媒体查询设置 rem
简单易用缺乏灵活度请看演示你懂的
@媒体屏幕和（最小宽度：320 px){ html { font-size:50px } } @媒体屏幕和（最小宽度：360 px){ html { font-size:56.25 px } } @媒体屏幕和（最小宽度：375 px){ html { font-size:58.59375 px } } @媒体屏幕和（最小宽度：384 px){ html { font-size:60px } } @ media根据个人项目需求和产品设计可适当修改，以上演示写法并不唯一固定。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。