首页 >web前端 >css教程 > 正文

css中rem有什么特点

原创2020-11-30 13:53:2801361

css中rem的特点是:使用rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素,例如【.b{font-size: 2rem; //这里就8px;}】。

本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。

rem:(相对于根元素的即HTML)

rem是CSS3中新增的一个相对单位,它与em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。它的使用非常简单,通过改变根元素的大小就可以改变它的值(rem和em是类似的,就是相对的元素不一样)

(学习视频分享:java视频教程

px:(固定不变的)

px 是 pixel 的缩写,它的含义是像素的意思,在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的

em:(相对于父元素的)

em是一个相对长度的单位,是相对于当前对象内文本的字体尺寸。如过我们未设置当前文本的字体尺寸,那么em就会相对于浏览器的默认字体尺寸

代码示例:

//em的值时相对于父元素,修改.a的大小,.b的大小会随之发生变化    
<style>
        .a{
            font-size: 4px;  //1em=4px
        }
        .b{
            font-size: 2rem;   //这里就8px;
        }
    </style>
</head>
<body>
    
    <div class="a">
        <p class="b">
            51515
        </p>
    </div>
 
</body>

相关推荐:CSS教程

以上就是css中rem有什么特点的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css rem 特点
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • Css3入门基础视频教程Css3入门基础视频教程
  • Css3入门视频教程Css3入门视频教程
  • Css3特效效果视频教程Css3特效效果视频教程
  • CSS视频教程-玉女心经版CSS视频教程-玉女心经版
  • 视频教程分类