rem 响应式布局公式
分类专栏: Css&
简介 最初学移动端的时候,用的rem布局方式,还是满好用的。
<p><strong class="ql-size-large">// rem 响应式布局公式</strong></p><p><strong class="ql-size-large">(function(doc,win){</strong></p><p><strong class="ql-size-large"> let docEl = doc.documentElement;</strong></p><p><strong class="ql-size-large"> let resizeEt = 'orientationchange' in window? 'orientationchange':'resize';</strong></p><p><strong class="ql-size-large"> let recalc = function(){</strong></p><p><strong class="ql-size-large"> let clientWidth = docEl.clientWidth;</strong></p><p><strong class="ql-size-large"> if(!clientWidth) return;</strong></p><p><strong class="ql-size-large"> if(clientWidth>=750){</strong></p><p><strong class="ql-size-large"> docEl.style.fontSize = '100px';</strong></p><p><strong class="ql-size-large"> }else{</strong></p><p><strong class="ql-size-large"> docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';</strong></p><p><strong class="ql-size-large"> }</strong></p><p><strong class="ql-size-large"> };</strong></p><p><br></p><p><strong class="ql-size-large"> if(!doc.addEventListener) return ;</strong></p><p><strong class="ql-size-large"> win.addEventListener(resizeEt,recalc,false);</strong></p><p><strong class="ql-size-large"> doc.addEventListener('DOMContentLoaded',recalc,false);</strong></p><p><strong class="ql-size-large"> recalc();</strong></p><p><strong class="ql-size-large">})(document,window);</strong></p>
分享到:
转载:
喜欢 4
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:203篇
- 建站时间:已运行798天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据