欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

CSS3中REM单位的用法详解(代码示例)

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

很多网站都在使用难以在越来越多的不同设备中调整的像素单元,CSS3引入了一些新的单位,包括REM单位,它代表“root em”,本篇文章给大家分享的内容是关于REM的使用。

那么,我们如何使用REM?

假设我们有这个CSS:

CSS

article h2 {font-size:20px;}
article p {font-size:12px;}

首先,我们需要确定相对于所有字体的px大小。为了方便起见,我所做的最好的做法是使root font-size 1px像这样:

CSS

Html {font-size:1px;}

其次,我们需要将其余的字体大小值从像素替换为rem单位。

CSS

article h2 {font-size:20rem;}
article p {font-size:12rem;}

REM做什么,需要20REM并将其与根元素相乘:

20 REM  *  1 PX = 20PX.

浏览器支持

IE7和IE8仍然需要使用PX值。这将迫使我们两次写入字体大小,一次在PX中,第二次用REM。

CSS

article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}

示例如下:

<!DOCTYPE Html>
<Html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/Css">
Html{font-size:1px;}
article h2{
  font-size:20px;/*Support IE7 & IE8*/
  font-size:20rem;
}
article p{
  font-size:12px;/*Support IE7 & IE8*/  
  font-size:12rem;
}
</style>
</head>
<body>
<section>
  <article>
    <h2>杨雨个人博客</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h2>杨雨个人博客1</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>
  <article>
    <h2>杨雨个人博客2</h2>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
  </article>  
</section>
</body>
</Html>

效果如下:

360截图20181107103913960.jpg

REM有什么优点?

让我们假设我们需要将网站中的所有字体放大20%,我们所要做的就是更改根元素中字体大小的大小,如下所示:

Html {font-size:1.2px;}

如果你想要将字体大小降低20%,你应该会这样做:

Html{font-size:0.8px;}

REM用于响应式设计

如果要根据响应式设计中的断点更改所有字体大小,则更容易。看例子:

@media (min-width: 320px){
    Html{
        font-size:1.4px;
    }}
@media (min-width: 600px){
    Html{
        font-size:1.2px;
    }}

现在在较小的屏幕中,我们可以将所有字体的大小调整大40%,而在中等屏幕中,我们将其重新调整大小20%。

使用less来解决两次写入内容的需求 - 用于支持旧浏览器

在less或sass中你可以添加函数来节省你写两次的所有时间。

可以使用less - font-size函数并调用它

.font-size(@font-size) {    
  font-size : @font-size * 1px;
  font-size : @font-size * 1rem;
  }
  article h2 {
  .font-size(20);
  }

编译后的CSS将如下所示:

article h2{
  font-size:20px;
  /*Support IE7 & IE8*/
  font-size:20rem;
  }
本文地址:http://itbyc.com/web/css3/20127.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1