这是我参与更文挑战的第 9 天，活动详情查看： 更文挑战

CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗

1. css3中的calc()函数

最近做项目，看到别人的css中出现的，发现此函数是用于动态计算长度值。

1.1 calc()使用注意点

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-“, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；
• 在less预编译语言中 应该这样使用 width:calc(~”100% – 10px”);

1.2 calc()含义

如下代码：

.box{
  width: calc(100% - 10px);
}
复制代码

一般情况下这段代码的意思是，.box元素比父级元素总是小10px;

1.3 calc()的性能问题

关于这个我查了一下在，前端这块避免使用calc（）表达式，因为它的重绘次数非常多，相当的影响性能。

2. canstant和env函数

env() CSS 函数以类似于 var 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。

为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
复制代码

2.1基本使用

env(< 自带值 > , < 回退值 >)

env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
复制代码

其中回退值不是必须的，作用是当自带值不生效，就以回退值为准；
canstant（）函数也是类似

3.ios的适配问题

3.1 ios中的安全距离问题

综上2，其实constant和env函数是ios为了解决自身安全距离问题而生的
基本上使用：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
复制代码

就能解决ios底部安全距离问题
如果是在小程序中就不必增加新的视口元值
如果是在H5中就得新增视口元值，其中viewport-fit=cover，其中viewport有三个可选值:

• auto:此值不影响初始布局视图端口，并且整个web页面都是可查看的。
• contain:视图端口按比例缩放，以适合显示内嵌的最大矩形。
• cover:视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。

3.2 ios中input按钮去掉自带的渐变效果

解决：

input{
	outline:0px; 
	-webkit-appearance:none;
}
复制代码

4. 微信小程序中字体加粗

做过项目的小伙伴不知道发现没有，在小程序中font-weight:block；等不生效，虽然开发工具上是生效的，但是手机上显示依然还是没有加粗；

解决：

//安卓解决方案
font-weight: 400;
-webkit-text-stroke: 0.02em;
//ios解决方案
font-family: PingFang-Midum;
复制代码