css calc()函数动态根据屏幕宽度计算宽度

今天写移动端H5页面，mui按钮在layer mobile 弹窗 html类型的时候，mui按钮宽度设置为100%的时候，mui按钮宽度会超出屏幕，听同事建议，使用 css calc()函数计算得以解决。

菜鸟教程解释calc()函数地址：https://www.runoob.com/cssref/func-calc.html

定义与用法

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

使用例子

width: calc(100% - 26px);

此处 100% 动态获取屏幕宽度，然后减去26px个像素

css calc()函数动态根据屏幕宽度计算宽度相关推荐

CSS calc() 函数
CSS calc() 函数 width: calc(100% - 100px); calc()是一个css运算函数,上述表示在继承的父级100%宽度的情况下动态减去了100px 需要注意的是,运算符前 ...
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容,用于动态计算长度值.例如:width: calc(100% - 10px):需要注意的是,运算符前后都需要保留一个空格.calc()函数支持 "+&q ...
CSS calc()函数
一.calc()函数介绍 calc() 函数用于动态计算长度值需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函 ...
CSS计算 CSS运算 calc函数的使用方法
CSS也是可以进行运算的!!! CSS中的calc函数是可以对不同值进行计算的它可以在 <length>, <frequency>,<angle>, <ti ...
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS calc() 使用指南
CSS calc 使用指南 CSS calc() 使用指南 1. 什么是 CSS calc() 函数? 2. 使用 calc() 在 CSS 中进行单位转换 3. 使用 calc() 转换字体大小 4 ...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) : 相对长度单位相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. 单位描述 em 它是描述相对于应用 ...
【CSS】calc 函数（动态计算长度值）
文章目录基本用法基本用法 calc() 函数用于动态计算长度值. 需要注意的是: 1. 运算符前后都需要保留一个空格,例如: width: calc(100% - 10px): 2. 任何长度值都 ...

css calc()函数动态根据屏幕宽度计算宽度

定义与用法

css calc()函数动态根据屏幕宽度计算宽度相关推荐

最新文章

热门文章

css calc()函数 动态根据屏幕宽度计算宽度

定义与用法

css calc()函数 动态根据屏幕宽度计算宽度相关推荐

最新文章

热门文章

css calc()函数动态根据屏幕宽度计算宽度

css calc()函数动态根据屏幕宽度计算宽度相关推荐