rem实现响应式布局 js动态计算rem
作者:Miao 阅读:4772次
什么是rem
rem是相对于根元素(html标签)的字体大小的单位。
css3规定1rem=html根节点的font-size,rem也就是root em简写。
动态计算rem
核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。
实现手段:动态获取当前视口宽度width,除以一个固定的数n,得到rem的值。表达式为rem = width / n。通过此方法,rem大小始终为width的n等分。
最终效果:通常设计稿是指定的某个分辨率(比如常见移动端750px),要想在不同分辨率下看到同样的效果(等比例缩放),这里就需要使用js动态计算rem,达到我们想要的效果。
计算代码
<script type="text/javascript"> (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; clientWidth > 750 && (clientWidth = 750), clientWidth < 375 && (clientWidth = 375), docEl.style.fontSize = 100 * (clientWidth / 750) * (window.devicePixelRatio || 1) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
扩展
设备像素也就是物理像素:是屏幕上的一个个无法再拆分的点。
设备独立像素:是虚拟像素(横坐标轴上或纵坐标轴上的),比如某一台手机分辨率(设备像素)是480*800,纵向手持的宽度(设备独立像素)是320px,那么设备像素比就是480/320=1.5。
设备像素比:设备像素比 = 设备像素 / 设备独立像素。
本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!
如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com
上一篇:js作用域、作用域链、闭包