原理:rem是相对于根元素html的字体大小font-size的属性,浏览器默认字体大小16px,则1rem=16px
利用媒体查询,针对不同设备设置相应的font-size,项目中所有元素的大小均使用rem作为单位,从而实现响应式
@media screen and (max-width: 414px) {
html {
font-size: 18px
}
}
@media screen and (max-width: 375px) {
html {
font-size: 16px
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px
}
}
......
为了更准确监听设备可视窗口变化,我们可以在css
之前插入script
标签,内容如下:
//动态为根元素设置字体大小
function init () {
// 获取屏幕宽度
var width = document.documentElement.clientWidth
// 设置根元素字体大小。此时为宽的10等分(看需求)
document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用,设置一次
init()
// 监听手机旋转的事件的时机,重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化,重新设置
window.addEventListener('resize', init)
无论设备可视窗口如何变化,始终设置rem
为width
的1/10,实现了百分比布局