[分享]css中em和rem布局

CSS中的布局方式各有千秋，其中em和rem布局方式是比较常用的两种布局方式。em是指父元素字体大小的倍数，通常用于字体大小的设置。例如，在一个p标签内设置1.5em的字体大小，如果其父元素字体大小为...

CSS中的布局方式各有千秋，其中em和rem布局方式是比较常用的两种布局方式。

em是指父元素字体大小的倍数，通常用于字体大小的设置。例如，在一个p标签内设置1.5em的字体大小，如果其父元素字体大小为16px，那么这个p标签内的字体大小将会是24px。

p {
    font-size: 1.5em;
} 

rem是指根元素（即html元素）字体大小的倍数，通常用于实现响应式布局。例如，在html元素内设置16px字体大小，那么在任何一个元素中设置1rem字体大小都将会等于16px。

html {
    font-size: 16px;
}
p {
    font-size: 1rem;
} 

在使用rem布局的时候，我们常常会用JS动态调整html元素的字体大小，来实现页面的自适应。下面是一个简单的例子：

// JS代码
window.onload = function() {
    function resize() {
        var html = document.documentElement;
        html.style.fontSize = html.clientWidth / 10 + 'px';
    }
    resize();
    window.onresize = resize;
}

// CSS代码
p {
    font-size: 1.6rem;
} 

在以上的例子中，我们首先使用JS获取html元素，然后根据窗口的宽度，动态设置html元素的字体大小，以达到响应式的效果。

总之，通过灵活运用em和rem布局方式，我们可以更轻松地实现页面布局的效果，更好地适应不同的屏幕和设备。