点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

CSS3中REM单位的用法详解（代码示例）

来源：懂视网责编：小采时间：2020-11-02 22:12:41

CSS3中REM单位的用法详解（代码示例）

CSS3中REM单位的用法详解（代码示例）:很多网站都在使用难以在越来越多的不同设备中调整的像素单元，CSS3引入了一些新的单位，包括REM单位，它代表root em，本篇文章给大家分享的内容是关于REM的使用。那么，我们如何使用REM？假设我们有这个CSS：CSSarticle h2 {font-size:2

推荐度：

点击下载本文 文档为doc格式

导读CSS3中REM单位的用法详解（代码示例）:很多网站都在使用难以在越来越多的不同设备中调整的像素单元，CSS3引入了一些新的单位，包括REM单位，它代表root em，本篇文章给大家分享的内容是关于REM的使用。那么，我们如何使用REM？假设我们有这个CSS：CSSarticle h2 {font-size:2

很多网站都在使用难以在越来越多的不同设备中调整的像素单元，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>Gxlcms</h2>
 <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 </article>
 <article>
 <h2>Gxlcms1</h2>
 <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 </article>
 <article>
 <h2>Gxlcms2</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;
 }

CSS3中REM单位的用法详解（代码示例）

推荐度：

点击下载本文 文档为doc格式

标签：的使用 css css3

热门焦点

CSS3中REM单位的用法详解（代码示例）

CSS3中REM单位的用法详解（代码示例）

CSS3中REM单位的用法详解（代码示例）

最新推荐

猜你喜欢

热门推荐