CSS基础： rem和媒体查询

本文主要是介绍CSS基础： rem和媒体查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

rem单位

em 单位

首先说一个单位：em

em 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

简单的说em是父元素字体的大小，和px不同，毕竟px象素是一个标准的单位，而em是一个相对的单位，来一个例子演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>div:nth-of-type(1){font-size: 48px;}div:nth-of-type(1)  p{width: 1em;height: 1em;background-color: green;}div:nth-of-type(2){font-size: 24px;}div:nth-of-type(2) p{width: 1em;height: 1em;background-color: red;}</style>
</head>
<body><div><p></p>
</div><div><p></p>
</div></body>
</html>

在这里插入图片描述

可以看出在元素上设置完em的大小的时候会影响自己子元素的em的值。

rem

不同于em因为rem是根据html元素在字体大小作为参考的。

这个时候又有疑问了，既然是基于html的标准，那么直接在html上定义em不就行了，为什么还要来一个rem这个单位？有必要吗？

很有必要，因为rem是基于html元素的，不会被中间的元素所影响，比如：

<html><body><div><p>  </p></div></body>
</html>

如果定义号rem为24px，无论body还是最里面的p标签无论如何修改其本身font-size，其子类的1rem还是为24px。但是em就不同了，比如html定义font-size=24px。然后body=0.5em，那么div的1em就是12px了。毕竟em受父类标签的影响。

演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>html{font-size: 24px;}div:nth-of-type(1){font-size: 2em;}div:nth-of-type(1)  p{width: 1em;height: 1em;background-color: green;}div:nth-of-type(2){font-size: 2rem;}div:nth-of-type(2) p{width: 1rem;height: 1rem;background-color: red;}</style>
</head>
<body><div><p></p>
</div><div><p></p>
</div></body>
</html>

在这里插入图片描述

可以看出第一个div下的p标签1em变成了48px了。所以可以看出虽然em也是相对单位，但是其会被其父类影响。而这个时候就需要一个更加稳定的相对单位rem。

为什么要了解rem呢？因为可以对网页设置的时候可以用rem作为单位，可以修改rem这个相对单位的真实大小来修改网页呈现的状态。比如苏宁易购的网页就是通过这种凡是实现页面元素根据窗口变大变小的。

在这里插入图片描述

媒体查询

媒体查询（media query）是CSS3的新语法。

格式：

@media mediatype  and | not |only(media feature){.....
}

@media 开头这个是格式要求
mediatype是媒体类型，具体有：

值描述
all 用于所有设备
print 用于打印机或者打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
关键字and ， not ，only作为条件的逻辑复合

关键字描述
and 和，且的意思
not 非的意思
only 指特定的媒体类型
media feature 媒体的特性:

值	描述
all	用于所有设备
print	用于打印机或者打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

关键字	描述
and	和，且的意思
not	非的意思
only	指特定的媒体类型

在这里插入图片描述

上面截图中解释一下min和max，举例说一下，那就是min-width和max-width。

max-width的意思以小于等于这个值，而min-width是大于等于这个值。

还是老规矩来一个演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>div{height: 200px;}@media screen and (max-width: 800px){div{background-color: green;}}@media screen and (max-width: 500px){div{background-color: red;}}</style>
</head>
<body>
<div>
</div>
</body>
</html>

在这里插入图片描述

可以看出媒体查询可以根据网页视口的大小而改变一些css的样式，所以很多时候rem的和媒体查询两个相互结合就可以实现了页面变化而呈现的元素也会成缩放。

现在演示一窗口变化，字体也在变化的例子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><style>div{width: 750px;margin: 10px auto;font-size: 1rem;background-color: #55a532;}@media screen and (min-width: 750px){html{font-size: 48px;}}@media screen and (min-width: 500px){div{font-size: 24px;}}</style>
</head>
<body>
<div>好人无敌。
</div>
</body>
</html>

在这里插入图片描述

引入资源

当样式比较繁多的时候，开发者针对不同的媒体使用不同的css样式表，原理也是在link的时候通过媒体查询进行判断，然后引入不同的css文件。

格式如下：

<link rel="stylesheet" media="mediatype  and | not |only(media feature)" href="路径">

演示：

首先写一个css1.css样式表。

div{width: 100%;height: 20px;}
div:nth-child(1){background-color: red;
}
div:nth-child(2){background-color: green;
}

再来一个css2.css

div{float: left;width: 50%;height: 20px;}
div:nth-child(1){background-color: red;
}
div:nth-child(2){background-color: green;
}

最后来一个html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试文档</title><link rel="stylesheet" media="screen and (min-width:500px)" href="css2.css"><link rel="stylesheet" media="screen and (max-width:500px)" href="css1.css"></head>
<body>
<div></div>
<div></div>
</body>
</html>