env(safe-area-inset-top,20px)
env(safe-area-inset-bottom,20px)
env(safe-area-inset-left,20px)
env(safe-area-inset-right,20px)

html {
  font-size: 16px;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 22px);
}

@media screen and (max-width: 320px) {
  html {
    font-size: 14px;
  }
}

@supports not (width: clamp(1px, 2px, 3px)) {
  @media screen and (min-width: 375px) {
    html {
      font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
  }

  @media screen and (min-width: 414px) {
    html {
      font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
  }

  @media screen and (min-width: 1000px) {
    html {
      font-size: 22px;
    }
  }
}

// 如果页面宽10px，就是下面这样写,之后的元素像素单位都可这样写
clac( 10 / 16rem)

:root{
  --primary-color:red;//自定义属性和值，css 变量
}
button{
  color: var(--primary-color,#444);// css 变量的使用,若不支持前面的就是用默认值，只要第一个参数有效，哪怕是乱七八糟的，他var就会正常执行，如果不合法就会使用初始值，如果无效就使用后面的默认值  https://demo.cssworld.cn/new/8/1-1.php
}

// 起始值
.example{
  --gradientColor:deeppink,deepskyblue;
  background:linear-gradient(to top, var(--gradientColor)) 
}

// 整个函数参数
.example{
  --gradientColor:to top, deeppink,deepskyblue;
  background:linear-gradient(var(--gradientColor)) 
}

// 整个函数表达式
.example{
  --gradientColor:linear-gradient(to top, deeppink,deepskyblue);
  background:var(--gradientColor) 
}

<div style="--color:red;">
  <img src="1.png" style="1px solid var(--color)">
</div>