纯CSS实现箭头根据高度显示或隐藏

参考文章：https://mp.weixin.qq.com/s/CsKXJhHOQQzfVEyD0ghiTw

方式一：@container方法实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0 auto;
      height: 100vh;
      width: 100vw;
      overflow: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    .container {
      position: relative;
      margin-top: 60px;
      width: 300px;
      height: 170px;
      resize: vertical;
      overflow: hidden;
      background-color: azure;
      border: 2px solid black;
      padding: 15px;
      container-type: size; 
      container-name: content;
    }
    @container content (height <= 150px){
        .content::before{
            opacity: 0;
        }
    }
    .content {
      height: 100%;
    }
    .content::before {
      content: "↑";
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: all 0.5s;
    }
  </style>
  <body>
    <div class="container">
      <div class="content">
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
      </div>
    </div>
  </body>
</html>

方式二：clamp + calc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0 auto;
      height: 100vh;
      width: 100vw;
      overflow: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    .container {
      position: relative;
      margin-top: 60px;
      width: 300px;
      height: 170px;
      resize: vertical;
      overflow: hidden;
      background-color: azure;
      border: 2px solid black;
      padding: 15px;
    }
   
    .content {
      height: 100%;
    }
    .content::before {
      content: "↑";
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      bottom: clamp(-99999px, calc(calc(100% - 200px) * 100000), 10px);
    }
  </style>
  <body>
    <div class="container">
      <div class="content">
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
      </div>
    </div>
  </body>
</html>

css1

CSS实现页面宽度自适应

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

有意思的是，clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))。

参考文章：https://zhuanlan.zhihu.com/p/512566727

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0 auto;
      height: 100vh;
      width: 100vw;
      overflow: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    .pagebox {
      width: clamp(430px, 100%, 800px);
      height: 100%;
      background-color: red;
      font-size: clamp(14px, 3.75vw, 18px)
    }
  </style>
  <body>
    <div class="pagebox">
        占位符占位符占位符占位符占位符占位符占位符
        占位符占位符占位符占位符占位符占位符占位符
        占位符占位符占位符占位符占位符占位符占位符
        占位符占位符占位符占位符占位符占位符占位符
        占位符占位符占位符占位符占位符占位符占位符
        占位符占位符占位符占位符占位符占位符占位符
    </div>
  </body>
</html>

css2