CSS响应式 - 技术栈

除了常见的media、flex、grid外的其他css响应元素

1.min()函数

当我们想根据不同尺寸调整容器的边距时，首先想到的可能是媒体查询

javascript 复制代码

<style>
    .container{
        padding: 5em;
    }
    @media (max-width: 600px) {
        .container{
            padding: 2em;
        }
    } 
</style>
<div class="container">测试字体测试字体测试字体测试字体测试字体测试字体测试字体测试字体</div>

但有一个更好的方法，使用min()函数，,MDN解释为：min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。

javascript 复制代码

// 其中这里的 8% 是基于 .container 的包含块的宽度。如果 .container 的包含块宽度是 1000px，那么 8% 就是 80px。
 .container{
     padding: min(5em,8%); 
  }

2.响应式字体单位rem

说起rem就会想起em，对于这两个单位MDN是这样解释的：

em 相对于本元素的字体大小，或者在用于 font-size 时相对于父元素的字体大小。rem 相对于根元素的字体大小。

根据布局的需求选择em或rem，em适用于需要继承父元素尺寸的情况，rem适用于需要全局一致性的场景，一般选择rem的情况较多，使用根元素作为参考更容易计算。

3.clamp()

当我们希望字体能够根据不同屏幕大小同时进行缩放，可使用clamp函数。

MDN解释：clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

javascript 复制代码

<style>
    .container{
        font-size:clamp(1.8rem,10vw,5rem)
    }
</style>
<div class="container">测试字体测试字体测试字体测试字体测试字体测试字体测试字体测试字体</div>

代码中首选值为10vw，vw是相对于视口的单位，在屏幕缩放时根据视口的大小来进行选择字体的最大值5rem或最小值1.8rem，但是当通过鼠标滚轮进行缩放时，字体大小不变化。因此想要字体鼠标滚轮操作时也能放大缩小，则可考虑响应式的单位。

javascript 复制代码

.container{
        font-size:clamp(1.8rem,calc(7vw + 1rem),5rem)
    }

4.图片自适应img

MDN中对img属性的解释如下：

想要图片随着屏幕的缩放自适应，设置图片的max-weidth为100%，最大不能超出屏幕，高度自适应。

javascript 复制代码

img{
   max-width: 100%; 
   height: auto;
}
<img width="1400" height="1300" src="./menHu_fkpt1.png" alt="">

有时会有多张尺寸不同的图，在这种情况需要强制使用同一种尺寸，并且保持响应式。可添加aspect-ratio属性保持图片的纵横比，以及object-fit设置图片的适应方式。

javascript 复制代码

img{
   max-width: 100%; 
   height: auto;
   aspect-ratio: 9 / 16;
   object-fit: cover;
}

5.视口高度vh

------针对移动端。

当使用height:100vh时，元素会占据整个可视高度，在移动端手机上时，则会多出一部分，这是因为vh的视口包含了手机状态栏下方的信息区域，而当前区域被占据了，页面则出现了向下的滚动条，此时设为height:100dvh。

记录内容来源于其他视频博主，如有侵权请告知删除！