医院建筑设计案例,常州自助建站seo,驾校视频网站模板,l临沂互助系统网站开发H5移动的适配方案
rem
rem适配方案是兼容性比较好的移动端适配方案#xff0c;rem支持大部分的移动端系统和机型。
rem是相对于根元素的字体大小的单位。本质上就是一个相对单位#xff0c;和em的区别是#xff1a;em是依赖父元素的字体来计算#xff0c;rem是依赖根元素…H5移动的适配方案
rem
rem适配方案是兼容性比较好的移动端适配方案rem支持大部分的移动端系统和机型。
rem是相对于根元素的字体大小的单位。本质上就是一个相对单位和em的区别是em是依赖父元素的字体来计算rem是依赖根元素的字体来计算。
rem适配的原理把px单位换算为rem单位然后根据屏幕大小动态设置根元素HTML的字体大小这样实现在不同屏幕下适配的目的。
动态设置根元素的font-size
使用浏览器浏览网页HTML的字体大小默认值是由浏览器来决定的比如有的浏览器默认字体大小为16px那么16px等于1rem。
在实际开发中我们都是根据屏幕的宽度来动态设置。
动态设置有两种方式
一、通过媒体查询来动态设置
media screen and (min-width:461px) {html {font-size: 16px;}
}media screen and (max-width:460px) and (min-width:401px) {html {font-size: 20px;}
}media screen and (max-width:400px) {html {font-size: 26px;}
}二、使用JavaScript动态设置html的font-size代码如下 scriptwindow.addEventListener(resize,function(){let htmlDom document.getElementsByTagName(html)[0];htmlDom.style.fontSize htmlDom /10 px;})/scriptrem的计算
根据上面的计算公司我们可以拿到rem的基准值比如一个机型的屏幕宽度为375px【由Chrome浏览器上DevTools中的Device Mode得到】那么rem的基准值就是37.5
如果我们的H5样式是使用Sass的话就可以定义计算公式
function pxTorem($px){$rem:37.5;$return ($px / $rem) rem
}.brn{width: pxTorem(200);height:pxTorem(600)
}这就是在某个场景下rem的计算方式。
