前端开发里面怎么上传视频|前端比较好的开发工具|前端开发工具选择
rem是个低调的
rem是什么?
rem和em单位一样,都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素
使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果
一般情况在项目的最前面加载一段
/p>
招聘前端小程序开发:圣诞主题width: 100%;
height: 100%;
background: red;
}
.page {
width: 5rem;
height: 10rem;
background: yellow;
font-size: 0.3rem;
}
rem跟着html:font-size变化var docEl = document.documentElement,
//当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当前窗口的变化,一旦有变化就需要重新设置根字体的值
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
recalc = function () {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + ‘px’;
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener(‘DOMContentLoaded’, recalc, false);
更多推荐
前端屏幕尺寸和分辨率_前端开发页面 根据屏幕的大小自适应 rem布局
发布评论