rem布局

最新推荐文章于 2024-04-13 19:57:22 发布

佛系小菜鸡

最新推荐文章于 2024-04-13 19:57:22 发布

阅读量177

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_40224261/article/details/104293182

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

rem基础

em单位

em单位是相对于父元素的，相对于字体大小来说的
比如，父设置font-size=10px，非根元素设置width：2em，转换成px就是20px

rem单位

rem，是一个相对单位，是相对于html也就是根元素，相对于字体大小来说的。
比如，根元素（html）设置font-size=10px，非根元素设置width：2rem，转换成px就是20px
rem的优点：
就是可以通过修改html里面的字体大小，来改变页面中元素的大小，实现整体控制效果。

媒体查询

什么是谋体查询

媒体查询（MediaQuery）是CSS3新语法

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面

语法规范

在这里插入图片描述

用@mdia开头
mediatype 媒体类型
media feature 媒体特性

通过媒体查询引入资源

当样式繁多的时候，我们可以针对不同的媒体使用不用的stylesheets（样式表）。也就是判断屏幕的尺寸大小，从而根据屏幕的尺寸大小引入不同的css样式。
在这里插入图片描述

rem+谋体查询案例代码

实现效果：当屏幕宽大超过一定大小时，头部的高度以及字体大小都会发生改变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体查询</title>
		<style type="text/css">
			@media screen and (min-width: 540px){
				html{
					font-size: 50px;
				}
			}
			@media screen and (min-width: 1000px){
				html{
					font-size: 100px;
				}
			}
			.top{
				background-color: #008000;
				font-size: 0.5rem;
				height: 1rem;
				text-align: center;
				line-height: 1rem;
			}
		</style>
	</head>
	<body>
		<div class="top">
			首页
		</div>
	</body>
</html>