微信小程序中使用calc（）的注意事项

最新推荐文章于 2025-08-09 10:24:33 发布
原创 最新推荐文章于 2025-08-09 10:24:33 发布 · 1w 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #css

本文探讨了在微信小程序中使用CSS calc()函数的注意事项，包括如何动态调整布局的宽度和高度，特别是在不同设备上保持一致的显示效果。强调了在表达式中运算符前后添加空格的重要性。

微信小程序中使用calc（）的注意事项

calc经常被使用在计算剩下的宽度或者高度，可以根据机型动态改变布局的宽度或者高度，但是使用过程中有以下注意事项

.container{
	height: calc(100vh - 320rpx);
	width:100%
}

在表达式中运算符的前后必须要有空格才能生效

微信小程序3-2 计算器
qq_67308033的博客
11-13 2461
创建项目微信小程序项目 -计算器单击【确定】按钮按照惯例做一些初始化工作选择器查看预览效果。
微信小程序购物车、父子组件传值及calc的注意事项总结
12-09
在做微信小程序时，觉得小组里对购物车的实现不是很完美，就自己尝试的写了下，然后用到了父子组件传值，父子组件传值的话，和vue框架上是非常相似的，以及calc这个css函数，calc有个注意点，自己不怎么用，一时间有...
记录微信小程序 height: calc(xx - xx)；无效问题
10-15
主要介绍了微信小程序 - height: calc(xx - xx)；无效 问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下
记录微信小程序 height: calc(xx – xx)；无效问题
12-30
遇到一个小问题，记录一下 问题：在微信小程序中使用scroll-view标签时，用height:cale(xx – xx)设置高度无效，在page中设置高度为百分百依旧无效 解决办法：直接在最大的view标签中设置高度为百分百即可 <!-- 视频列表 --> page { height: 100%; } .videoList { height: calc(100% - 480rpx); }
微信小程序中可以使用calc 函数用于动态计算长度值。
ywllllll的博客
11-10 3748
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则 ...
【微信小程序】微信开发小项目+简易计算器+代码
wy1948的博客
04-07 6800
效果图： 2. index.json代码： { "usingComponents": {}, "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "计算器", "navigationBarTextStyle": "black" } 3.index.wxss page{ display: fl...
微信小程序之购物车和父子组件传值及calc的注意事项
03-29
要实现图中删除的效果，使用组件的形式更好做点，我当时本想直接在pages里实现，不过结果就是，滑动时，所有的商品都显示了删除按钮，除非用数组将每个商品要移动的距离存储起来，不过这样的话就很麻烦，所以我也是...
在微信小程序中使用cssnext
08-10
下面我们将深入探讨如何在微信小程序中使用`cssnext`以及它能带来的好处。 1. **什么是cssnext** `cssnext`是一个CSS预处理器，它支持下一代CSS特性，如变量、函数、自定义属性（CSS变量）、选择器层级（nesting...
微信小程序--calc无效问题
blwinner的专栏
05-19 3740
问题 在使用scroll-view时，用height: calc(100% - 180rpx);设置高度无效 百度 在网上查了一下, 基本都是一个办法, 就是给scroll-view加一个父元素, 给父元素设置高度. 但是根据官方文档, scroll-view必须设置height属性才能正确滚动 分析 其实问题出在了100%, 如果设置为100%, 就会默认用滚动组件中的所有元素把当前页面撑开, 比如每个元素高100rpx, 共有10个, 屏幕高度800rpx, 那么100%=1000rpx, 所以前面的.
calc使用注意事项
m0_69813021的博客
12-20 198
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；calc()函数支持 “+”, “-”, “*”, “/” 运算；任何长度值都可以使用calc()函数进行计算；calc()函数使用标准的数学运算优先级规则；calc() 函数用于动态计算长度值。:运算符前后要保留一个空格。今天写项目检查了半天.
小程序04/ 小程序 开启和关闭下拉刷新、小程序wxss中calc计算函数
m0_64494670的博客
01-05 1171
小程序04/ 小程序 开启和关闭下拉刷新、小程序wxss中calc计算函数
探索微信小程序开发：wxapp-sCalc 入门级计算器实践项目
gitblog_00506的博客
08-09 874
探索微信小程序开发：wxapp-sCalc 入门级计算器实践项目 wxapp-sCalc:speech_balloon:微信小程序版简易计算器demo，适合入门练手项目地址:https://gitcode.com/gh_mirrors/wx/wxapp-sCalc 微信小程序作为一种轻量级的应用开发平台，以其便捷的分发方式和强大的功能特性，越来越受到开发者们的青睐。对于初学者，快速上手并掌握其开...
微信小程序横屏字体变大的完美解决方案
盛国强的博客
07-23 9371
微信小程序设置横屏之后原本的rpx单位就不再适用。 rpx：屏幕宽度是固定的 750rpx，也就是说：5rpx == 5 / 750 * 屏幕宽度，竖屏切换成横屏，屏幕宽度就会变大，5rpx也会随即变大。字体也就变大了。 有人说用px解决，没错，的确可以，但不同尺寸，不同分辨率的手机，屏幕的像素也不一样，这就会导致控件的大小在不同手机上的展示会有差异。 那怎么完美解决呢？？？ 了解一下CS...
解决微信小程序中 calc 失效问题
qq_45830543的博客
03-21 1463
有效写法是： height: ~"calc(100vh - 80rpx)"; 注意： 1、运算符左右两边要有空格； 2、数字和单位之间不能有空格； 3、括号与减数，被减数之间不能有空格； 4、 以上无效记得加上英文~符和双引号。 ...
微信小程序的calc不生效处理
weixin_30734435的博客
09-24 1682
大致文字初略的记录描述一下问题：外层是relative相对定位，内部一个view 需要绝对定位bottom的值为128rpx,同时还要兼容适配苹果x的底部，所以值是这样设置的： bottom: calc(env(safe-area-inset-bottom) + 128rpx) 然而在安卓上bottom的值始终为0（在vconsole中查看了该元素），ios上是没有问题的。猜测...
uniapp微信小程序scroll-view动态style样式高度和宽度中的calc属性
FUFCY的博客
03-24 2543
<scroll-view class="gd_z" scroll-y="true" style="height: calc(100vh - {{statusBarHeight*2.3 +70}}rpx);"></scroll-view> //statusBarHeight是变量要用{{}}这个就可以了
css计算函数 scalc 微信小程序_面试问题总结
weixin_28963665的博客
02-23 767
1、响应式布局一、相对长度单位。 其长度单位会随着它的参考值的变化而变化。px,像素em,元素的字体高度%,百分比rem,根元素的font-sizevm,视窗宽度，1vw=视窗宽度的1%vh,视窗高度，1vh=视窗高度的1%二、如何实现移动端字体大小屏幕自适应，百分比方法的缺点，rem的作用(1)用媒体查询+rem@media only screen and (min-device-width: ...
微信小程序---计算器
最新发布
qq_62076735的博客
08-09 206
本文介绍了一个基于微信小程序的科学计算器实现方案。核心功能包括：1) 基础四则运算和三角函数计算；2) 采用辅助模块calc.js处理浮点数精度问题，通过整数放大法解决JS的0.1+0.2≠0.3等精度误差；3) 实现角度/弧度转换和结果精度控制；4) 前端界面采用flex布局，包含数字键盘和运算符号按钮；5) 逻辑处理包括运算状态管理、连续计算、小数点处理等。项目亮点是通过特殊算法确保计算精度，同时支持扩展科学计算功能。
微信小程序购物车实战与calc使用技巧
本文将重点讨论购物车的实现，以及在微信小程序中父子组件如何传递值和使用CSS的`calc`函数进行动态计算的注意事项。 首先，购物车的核心在于能够选择和管理多个商品，包括增加、减少商品数量、删除商品等操作。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值