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单位

おすすめ

転載: blog.csdn.net/xulihua_75/article/details/124954580