H5 scss 移动端的样式适配

最新推荐文章于 2025-08-01 17:13:01 发布
最新推荐文章于 2025-08-01 17:13:01 发布
阅读量858 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 实践经验 文章标签： scss 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zmy967131/article/details/144510041

在移动端样式的scss文件中，出现了这些变量

env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left: 安全区域距离左边界的距离
safe-area-inset-right: 安全区域距离右边界的距离
safe-area-inset-top: 安全区域距离顶部边界的距离
safe-area-inset-bottom: 安全区域距离底部边界的距离

env：在iOS 11.2及更高版本的Safari浏览器中受支持，并且是未来的标准

constant：在iOS 11.0至11.1版本的Safari浏览器中受支持，但已被弃用，不推荐在新项目中使用。

小程序进阶-env(safe-area-inset-bottom)的使用
weixin_43166227的博客
09-04 6477
env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量，用于获取设备底部和顶部安全区域的大小。所谓的安全区域就是指在iPhone X及以上的设备中，为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域，以确保内容在安全区域内显示。
Next.js H5 移动端适配
m0_72348850的博客
06-09 926
是无法处理内联样式的，就是说你写在标签style里的属性是不会被转换的，要注意！由于next.js内置了postcss，所以我们不需要再安装postcss/postcss-loader。2.配置postcss.config.mjs文件（没有就自己创建这个文件，位于根目录）配置参数，我这里由于需要做h5到pc自适应，所以我H5的css使用的是rpx单位，经过。tailwindcss是我安装的依赖，没安装的可以删除这项。3.在scss/less/css文件里直接使用配置的。插件的转化，会转换成vw单位；
html安全区域,css属性_env()和constant()设置安全区域
weixin_33669766的博客
06-17 1473
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：safe-area-inset-left：安全区域距离左边边界的距离safe-area-inset-right：安全区域距离右边边界的距离safe-area-inset-top：安全区域距离顶部边界的距离safe-area-inset-bottom ：安全距离底部边界的...
鸿蒙API14开发【网页中安全区域计算和避让适配】ArkTS组件
zhenggaoxiao232的博客
06-09 873
早期设备屏幕多为矩形，应用界面能够完整展示。随着全面屏、刘海屏等异形屏幕的普及，屏幕边缘可能出现圆角、摄像头或系统导航条，导致界面部分被遮挡。安全区域是指屏幕中未被设备硬件或系统UI遮挡的区域，不与系统非安全区域（如状态栏、挖孔区和导航栏）重叠。应用的布局默认限定在安全区域内，但系统提供沉浸式布局能力，允许应用通过配置使界面扩展至非安全区域。在沉浸式效果下，Web组件中的网页元素可能会被状态栏、挖孔区及导航条遮挡。
注意constant()放在前面，css属性——env()和constant()设置安全区域
weixin_56008510的博客
05-14 229
为了确保代码在不同浏览器中的兼容性，constant 和 env 的顺序应调整为先写 constant 再写 env。旧版本浏览器识别 constant，而现代浏览器使用 env。后声明的属性会覆盖前者，因此正确的写法是：padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);。这样可以确保代码在旧版和现代浏览器中都能正确生效。
sass/scss写移动端自适应样式,将px转化为rem
qq_42750608的博客
12-04 2425
众所周知,UI设计师是根据ip6的手机尺寸画的设计图,所以一般html宽是375px,所以将html的font-size写为37.5px; html{ font-size: 37.5px; } 然后在style标签(记得写lang="scss")中: @function px2rem($px) { $item: 37.5px; @return $px/$item+rem; } /...
前端系列-5 SCSS使用介绍
shengyu
07-14 4719
Sass作为一种强化CSS的辅助工具，提供了变量、嵌套、混合、继承、导入等功能，是的CSS代码更具可维护性。文件有两种格式：一种以.scss为文件后缀，语法与css相似，使用分号换行，使用大括号包裹样式；一种以.sass为文件后缀使用缩进代替大括号，使用换行代替分号。
env()和constant()设置安全区域
qq_52507367的博客
06-30 6764
env()和constant()设置安全区域
CSS 环境变量函数 env()
朝阳39的博客
10-27 4631
目前的功能主要是 设置安全边距，未来可能有更多功能。 /* 直接使用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(saf
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置
weixin_65363325的博客
06-03 2450
官网：https://ask.dcloud.net.cn/article/35564。
react h5如何使用 postcss-px-to-viewport+scss解决移动端适配问题
03-08
### 如何在 React H5 项目中配置 `postcss-px-to-viewport` 和 SCSS 实现移动端适配 #### 安装必要的依赖包 为了使项目能够顺利运行并支持所需的特性，需先安装一系列必需的工具和库： ```bash npm install sass-...
基于 vue3.x + CompositionAPI + javascript + vite的开源免费H5移动端模板
02-12
4. CSS 风格文件：应用样式通常在 styles 目录下，可能使用了 SCSS 或 Less 等预处理器。 5. 路由配置：定义了应用的导航和页面跳转逻辑。 6. 数据模拟：可能有 mock 数据用于开发阶段的接口模拟。 7. 组件化设计：...
vue移动端h5适配解决方案(lib-flexible+px2rem-loader)
光
06-21 3847
先介绍用到的两个工具： px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 lib-flexible：根据设备宽度，修改根元素html的font-size，以适配不同终端 配置 安装1：npm i px2rem-loader --save -dev 安装2：npm i lib-flexible --save 配置： build/utils....
如何在Vue3项目中使用vw实现移动端适配
前端李小白的博客
12-18 1760
From: 大漠 W3cplus 2018-01-25 有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪...
IOS安全区域适配
EmotionComputer
02-17 8989
iOS安全区域适配
​安全区域（Safe Area）
最新发布
chaoxxggg的博客
08-01 320
​。
小程序显示兼容处理，home键处理
大山博客
01-18 786
ios安全间距使用，小程序，h5中如何应用详解
移动端开发 uniapp 基于苹果ios系统的安全区配置问题
超级小恐龙~
01-14 2904
height: calc(630upx + env(safe-area-inset-bottom)); safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 ...
iPhoneX 安全区域 safe-area-inset-*样式不生效
Stavin Li的博客
08-26 6920
iPhoneX 安全区域 safe-area-inset-*样式不生效 解决办法： 添加 meta name="viewport" 中增加viewport-fit=cover内容 <meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值