css案例5——字体自适应、文字随页面变化而变化、rem单位

一、案例描述

文字随页面放大而放大。【原理：对于响应式网站来说应该有响应式的字体，一个响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端的屏幕。CSS3 规范引入了一个新的单位叫 rem。rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：html { font-size:16px; }。之后定义响应式的字体大小。】

二、案例效果演示

三、案例代码

<style>
   body {
        font-size: 16px;
    }
    
    @media (min-width: 640px) {
        body {
            font-size: 1.2rem;//页面宽度大于640px时，字体变为16像素的1.2倍
        }
    }
    
    @media (min-width:960px) {
        body {
            font-size: 1.5rem;//页面宽度大于960px时，字体变为16像素的1.5倍
        }
    }
    
    @media (min-width:1100px) {
        body {
            font-size: 2rem;//页面宽度大于1100px时，字体变为16像素的2倍
        }
    }
style>

五、总结

善用rem单位