本文介绍了rem作为CSS单位如何与媒体查询结合，实现网页内容在不同屏幕尺寸下的自适应布局。通过设置HTML字体大小并利用媒体查询，调整不同屏幕尺寸下的样式，以确保元素的大小和颜色随屏幕尺寸变化而变化。示例代码展示了针对不同屏幕尺寸的header样式设置。
一、rem
1、什么是rem
rem是和px、em一样的计量单位。px是确数值的计量单位，em和rem则是倍数计量单位。em是父元素字体大小的倍数单位，rem是根标签<html></html>字体大小的倍数单位。
2、rem的优势
当我们需要设置自适应式的子元素时，用rem配合媒体查询就很好实现。媒体查询附上如下
我们一般设备显示屏幕分为15份或者20份，以一份值的大小来设置HTML，font-size值。
二、媒体查询
1、什么是媒体查询
媒体查询可以简单的理解为目标条件查询。就是当满足某条件下就执行媒体查询内的htm文件元素的相关设定样式。
2、媒体查询格式
@media screen and(min-width:xx;){
需要再次条件下设定的元素{
正常的css样式格式
}
}
如：@media screen and (min-width:360px){
html{font-size：50px}
}意思就是当屏幕最小值也就是包含360px往上的屏幕大小下，html的字体大小为50px。
媒体查询不仅可以单纯的查元素，也可以查询导入css文件
上图的解释为，当屏幕大小在320px到339px之间时，该份html引入外部链接style320的css样式。当屏幕大小在640px以上的屏幕区间时，该份html引入外部链接style640的css样式
3、相关案例
*手机端的大多尺寸为：320px、360px、375px、400px、414px、480px、720px、750px。
当我想配合rem让html内的子元素大小和内容以及背景颜色都岁屏幕大小自适应的改变时。(媒体查询写在css样式内）。
<title>媒体查询案例</title>
<style>
html {
min-width: 360px;最小宽度360p'x
max-width: 920px;//设置最大宽度为920px也就是超过了最大宽度，元素继续增大就不会再有变化，与最小宽度一致。
}
header {px
text-align: center;
}
@media screen and (min-width:360px) {
html {
font: 12px;
}
header {
background-color: rgb(4, 158, 4);
height: 5rem;
line-height: 2.5em;
}
}
@media screen and (min-width:680px) {
header {
background-color: aquamarine;
font-size: 1.5rem;
height: 10rem;
line-height: 5rem;
}
}
@media screen and (min-width:900px) {
header {
background-color: rgb(127, 229, 255);
font-size: 2em;
height: 15rem;
line-height: 7.5em;
}
}
</style>
</head>
<body>
<header>媒体查询案例</header>
</body>
这样之后随着我屏幕的改变，效果如下
1649644109969
扫一扫
1136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
