CSS 环境变量函数 env()

已于 2024-07-10 11:22:34 修改
阅读量4k 收藏 5
点赞数 2
分类专栏： # 已归档链接 # CSS 文章标签： css
于 2021-10-27 09:09:44 首次发布
原文链接：https://www.epubit.com/bookDetails?id=UB77c7e6232fbdf
版权
本文探讨了如何使用CSS env()函数来设置页面的安全边距，确保内容不会被设备的刘海屏或其他安全区域遮挡。通过env(safe-area-inset-)属性，可以为不同方向设置内边距，并提供兜底值。正确设置viewport meta标签对于实现准确的间距至关重要。此外，文章还提及了该功能未来可能的扩展性。
摘要由CSDN通过智能技术生成

目前的功能主要是 设置安全边距，未来可能有更多功能。

/* 直接使用4个安全内边距值 */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* 使用4个安全内边距值，同时设置兜底尺寸值 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

在这里插入图片描述

  • env()函数中的属性区分大小写，因此，下面CSS代码中的padding-left值一定是50px：
padding-left: env(SAFE-AREA-INSET-LEFT, 50px);

SAFE-AREA-INSET-LEFT是无法识别的属性，因此，会使用兜底的50px作为padding-left的属性值。

  • 要想使safe-area-inset-*属性表现出准确的间距，一定要确保viewport相关的<meta>信息
<meta name="viewport" content="viewport-fit=cover">
朝阳39
关注
专栏目录
CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗
tangjie109411的博客
09-25 4848
CSS3中的calc、constant、env函数，IOS适配以及小程序字体加粗 1. css3中的calc()函数 最近做项目，看到别人的css中出现的，发现此函数是用于动态计算长度值。 1.1 calc()使用注意点 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则； 在less预编译语言中
环境变量 env 设置 c语言 头文件,CentOS 设置环境变量
weixin_42514202的博客
05-18 947
1、 查看环境变量，echo 命令用于在终端输出字符串或变量提取后的值，格式为“echo [字符串 | $变量]”echo $PATH/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/home/java/jdk1.8.0_172/bin:/home/java/jdk1.8.0_172/jre/bin:/opt/modules/hadoop-3.1...
postcss-env-function:在CSS中使用env（）变量
05-05
PostCSS环境变量 允许您遵循规范在CSS中使用env()变量。 @media ( max-width : env (--branding-small)) { body { padding : env (--branding-padding); } } /* becomes */ @media ( min-width : 600 px ) { body { padding : 20 px ; } } /* when the `importFrom` option is: { "environmentVariables": { "--branding-small": "600px", "--branding-padding": "20px" } } */ 用法 将添加到您的项目中： npm install postcss po
vant NavBar safe-area-inset-top 一加手机失效问题
最新发布
w140130w的博客
09-04 393
APP内嵌H5活动页, 需要实现沉浸式效果，因此APP客户端打开H5页面的时候需要开启webview全屏设置，开启之后，页面顶部会遮盖状态栏，但Vant 提供的NavBar导航栏提供了适配顶部安全区域的解决方案，就是使用safe-area-inset-top，但是出现了两个问题；解决方案：需要针对安卓手机，让客户端在打开H5之前在localstorage存储安全区域的值，自定义变量--safe-area-inset-top，并请将其放在根元素上，vant会自动获取该变量的值。问题一： IOS手机不支持。
CSS 的环境变量函数env()
读心悦
07-21 491
在CSS中，env()函数并不是传统意义上的“环境变量”函数，如你在编程语言中可能遇到的那样。相反，env()是CSS中的一个函数，它用于访问由宿主环境（如浏览器）提供给CSS的自定义属性（也称为环境变量）。这些环境变量通常用于在Web开发中提供特定的上下文信息，比如设备的物理像素比（DPR）或用户代理样式表（User Agent Style Sheets）中的特定值。然而，需要注意的是，env()
env_relocate 函数深入分析
weixin_33937499的博客
11-27 216
voidenv_relocate(void) 2{ 3 /* 4 * We must allocate a buffer for the environment 5 */ 6 env_ptr=(env_t*)malloc(CFG_ENV_SIZE)...
不常用的css属性总结， env，constant，attr函数，应用案例和技巧分析
qq_17335549的博客
06-17 1594
不常用的css属性总结， env，constant，attr函数，应用案例和技巧分析
css属性——env()和constant()设置安全区域
LiangRZ
11-26 4116
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 而env()和constant()函数有个必要的使用前提，H5网页设置viewport-f
Webpack设置环境变量的一些误区详解
11-26
- 写法三：通过`webpack-dev-server --env=development`或`webpack --env=production`配合自定义环境变量，这种方式可以使得环境变量在Webpack配置文件中可用，但不能在模块内部通过`process.env.NODE_ENV`获取。...
postcsspresetenv将现代CSS转换成浏览器能理解的东西
08-08
`postcss-preset-env`包含了多个内置的PostCSS插件，如`autoprefixer`（自动添加浏览器前缀），`postcss-custom-properties`（CSS变量支持），`postcss-color-function`（颜色函数转换）等。这些插件协同工作，确保...
django-starter-env:简朴的Django项目模板。 默认设置具有环境变量支持的安全性
03-17
【标题】中的“django-starter-env”是一个针对Django框架的项目模板，它强调了安全性并内置了环境变量的支持。这表明该模板旨在为开发者提供一个快速启动Django项目的便捷方式，同时考虑到应用的安全性和可扩展性。...
TP6.0 助手函数 env()
辰风沐阳
08-11 2000
env 助手函数用于获取快速获取环境变量配置，复制框架根目录下的 .example.env 文件，另存为 .env 文件，即可读取环境变量配置，本文记录三种读取方式 ThinkPHP技术群: 828567087 1. 门面类 \think\facade\Env::get('database.ussername', '默认值'); 2. env() 助手函数 a. 不传参数，返回一个数组，包含根目录下的 .env 文件的所有信息 $arr = env(); dump($arr); b. 读取一.
css 安全区域 safe-area-inset-
sayyy的专栏
02-15 7714
略
env()和constant()设置安全区域
qq_52507367的博客
06-30 5863
env()和constant()设置安全区域
env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题
热门推荐
郊眠寺
01-04 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
​从新回归Vue之3.0（七）：安装scss并配置全局样式文件，.env.环境变量配置和读取
蜗牛的博客
01-12 1219
一，安装sass // 注意要使用scss，必须安装依赖，否则报错 npm install node-sass sass-loader sass -D 在这一步很多人可能会卡住，例如我电脑上版本node -v v12.16.1 vue3.0项目安装sass报错 npm install node-sass sass-loader sass -D 报错如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@7.0.1 posti.
php env 函数不存在,laravel 为什么 env 函数没有作用？
weixin_32696821的博客
03-17 938
在 laravel 开发中遇到了这样的问题，业务代码中调用 env() 获取环境变量，结果无法获取。原因如官方文档所述：为了给你的应用程序提升速度，你应该使用 Artisan 命令 config:cache 将所有的配置文件缓存到单个文件中。这会把你的应用程序中所有的配置选项合并成一个单一的文件，然后框架会快速加载这个文件。通常来说，你应该把运行 php artisan config:cache ...
uniapp针对安全区域env(safe-area-inset-*)兼容
Hello__World123的博客
12-15 4168
用法： margin-top：var(–status-bar-height); height: calc(100vh -88rpx - 100rpx - var(–safe-area-inset-bottom) - var(–status-bar-height));
Vue3.0环境变量配置与模块化封装实践
- 选项中还提及了 CSS 的全局配置，这里提到的 `scss` 模块加载器，可以通过 `data` 属性传递环境变量或配置到样式中，使得样式根据环境变化。 Vue 3.0 环境变量配置的关键在于管理不同的环境变量，并确保在代码中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值