CSS基础: rem和媒体查询

2024-06-18 21:18

本文主要是介绍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 媒体的特性:

在这里插入图片描述

​ 上面截图中解释一下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>

在这里插入图片描述

这篇关于CSS基础: rem和媒体查询的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073080

相关文章

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案(推荐)2. 模糊匹配方案参数化查询示例使用场景建议性能优

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

mysql查询使用_rowid虚拟列的示例

《mysql查询使用_rowid虚拟列的示例》MySQL中,_rowid是InnoDB虚拟列,用于无主键表的行ID查询,若存在主键或唯一列,则指向其,否则使用隐藏ID(不稳定),推荐使用ROW_NUM... 目录1. 基本查询(适用于没有主键的表)2. 检查表是否支持 _rowid3. 注意事项4. 最佳实