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
收藏
上一篇:
ie浏览器下兼容获取类名
暂无评论信息
- 相关文章
- 文章推荐
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1267天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据