开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Safari 14 - min()、max()、clamp()不适用于vw和px值

Safari 14中的min()、max()和clamp()函数在处理vw和px值时存在一些限制。这些函数是CSS中的数学函数，用于计算和限制数值的范围。

具体来说，min()函数返回一组值中的最小值，max()函数返回一组值中的最大值，clamp()函数将一个值限制在指定的范围内。

然而，在Safari 14中，当这些函数应用于vw（视窗宽度的百分比）和px（像素）值时，可能会出现一些问题。这是因为Safari 14对于vw和px值的计算方式与其他浏览器存在差异。

对于vw值，Safari 14中的min()、max()和clamp()函数可能无法正确计算。这意味着在使用这些函数时，可能无法得到预期的结果。

对于px值，Safari 14中的min()、max()和clamp()函数只能接受纯数字作为参数，而不能接受带有单位的值。这意味着如果你尝试将带有单位的px值作为参数传递给这些函数，Safari 14将无法正确解析。

针对这个问题，可以考虑以下解决方案：

使用其他浏览器：如果你的应用程序或网站对于这些函数的正确计算非常重要，可以建议用户在其他浏览器中使用，例如Chrome、Firefox等。
使用其他CSS属性：如果你需要在Safari 14中实现类似的功能，可以尝试使用其他CSS属性或技术来达到相同的效果。例如，可以使用media queries、flexbox、grid等来实现类似的布局和限制效果。
JavaScript替代方案：如果你需要在Safari 14中使用这些函数，并且无法通过其他CSS属性实现相同的效果，可以考虑使用JavaScript来计算和限制数值的范围。通过编写自定义的函数或使用第三方库，可以实现类似的功能。

需要注意的是，以上解决方案仅针对Safari 14中min()、max()和clamp()函数在处理vw和px值时的限制。对于其他浏览器或其他数值类型，这些函数仍然可以正常使用。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云计算产品：https://cloud.tencent.com/product
云原生产品：https://cloud.tencent.com/product/cns
人工智能产品：https://cloud.tencent.com/product/ai
物联网产品：https://cloud.tencent.com/product/iot
移动开发产品：https://cloud.tencent.com/product/mobdev
存储产品：https://cloud.tencent.com/product/cos
区块链产品：https://cloud.tencent.com/product/bc
元宇宙产品：https://cloud.tencent.com/product/mu

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景用例

兼容性 min 和 max 的支持情况： clamp()的支持情况： CSS 比较函数根据CSS规范，比较函数是关于比较多个值并取其一的操作，我们来研究一下函数。...() 函数 max()函数和min()函数语法类似，区别在于max()函数返回的是最大值，min()函数返回的是最小值。...语法如下： clamp(MIN, VAL, MAX) 其中MIN表示最小值，VAL表示首选值，MAX表示最大值。...意思是，如果VAL在MIN和MAX范围之间，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。...如前所述，可以在max()函数中嵌套min()来实现clamp() 效果，该函数将模仿clamp()函数，如下所示： .title { font-size: max(16px, min(10vw

8102 1

现代 CSS 解决方案：CSS 数学函数

max()：从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 min()：从一个逗号分隔的表达式列表中选择最小的值作为属性的值 clamp()：把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时...min()、max() 支持多个值的列表 min()、max() 支持多个值的列表，譬如 width: max(1px, 2px, 3px, 50px)。...width: max(50vw, 300px + 10%); } 基于 max、min 模拟 clamp 现在，有这样一种场景，如果，我们又需要限制最大值，也需要限制最小值，怎么办呢？...: max(12px, min(3.75vw, 20px)); // 等价于 font-size: clamp(12px, 3.75vw, 20px); } clamp() clamp(...它接收三个参数：最小值、首选值、最大值。有意思的是，clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))。

1.2K1 0

Clamp()、Max() 和 Min() CSS 函数的用例

Clamp()、Max() 和 Min() CSS 函数的用例流体尺寸和定位在此示例中，我们有一个带有手机的部分，以及位于顶部的两个图像。...CSS： 0px：最小值，用于垂直分隔符。...CSS: .card { border-radius: max( 0px, min(8px, calc((100vw - 4px - 100%) * 9999)) ); } 让我们详细了解一下上面的...现在我们来剖析一下上面的 CSS：我们有一个 max() 函数，用于比较 0px 和 min() 的计算值，它将选择较大的值。...min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999) 的计算值之间进行比较，这将导致非常大的正数或负数。

1.6K2 0

别整一坨 CSS 代码了，试试这几个实用函数

Clamp(), Max(), 和 Min() 函数 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。...CSS: 0px：最小值，用于垂直分隔符。....card { border-radius: max( 0px, min(8px, calc((100vw - 4px - 100%) * 9999)) ); } 来剖析一下上面的...CSS: 我们有一个 max() 函数，在 0px 和 min()的计算值之间进行比较，并选择较大的值。...min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。

6881 0

分享14个你可能还未用上但又实用的CSS属性

:in-range 表示当前输入值位于 min 和 max 属性之间，可以使用它来样式化合法输入值。...:out-of-range 则表示当前输入值不在 min 和 max 属性之间，可以使用它来样式化非法输入值。...: 2px; } 五、clamp( ) 属性 clamp() CSS 函数将值限制在定义的最小边界和最大边界之间的值范围内。...该函数采用三个参数：最小值、首选值和最大允许值。语法： property: clamp(min, val, max); min 是长度值的最小值， max 是最大值， value 是初始首选值。...clamp( ) 函数会返回一个值，该值大于等于 min 且小于等于 max。例如当字体大小根据视口改变时，Clamp() 会派上用场。

1K4 0

【前端词典】提高幸福感的 9 个 CSS 技巧

合理使用 px | em | rem | % 等单位在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。...and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) {...font-size: 108px; } } // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 body { max-width:...540px; min-width: 320px; } 4...._14: 14px; --color: 20px; } .div1{ background-color: var(--main_bgcolor); font-size: var(

8712 0

能让你受益匪浅的10个css使用技巧

02 文字居中兼容正常处理文字上下居中的手段是让元素height和line-height相等，但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。...如果仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就无法限制容器的最大高度了。...因此，可以给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加即可。...+ 4 * (100vw - 414px) / 586); } } @media screen and (min-width: 600px) { html { /* 600px...font-size: calc(20px + 4 * (100vw - 600px) / 400); } } @media screen and (min-width: 1000px) {

1.6K2 0

那些不常见，但却非常实用的css属性(整理不易)

10、max-content / min-content / fill-available / fit-content 这几个值都可用在 width, height, min-width, min-height...、max() / min() max 在两者这件取最大；min 函数在两者之间取最小。...width: max(50vw, 300px); width: min(50vw, 300px); 15、clamp() clamp 函数会在定义的三个值之间，取中间的那个值，是大小在中间，不是位置在中间...， clamp(MIN, VAL, MAX) 和 max，min 函数一样，可以用在任何可以设置 , , , , ..., 5px); //中间值为3px font-size: clamp(4px, 3px, 5px); //中间值为4px width: clamp(200rem, 25vw, 150px);

1.9K1 0

一次性把所有普通和经典的网页布局讲得通通透透的，多图预警，建议收藏

clam()函数接受三个参数，即 clam(MIN, VAL, MAX)，其中MIN表示最小值，VAL表示首选值，MAX表示最大值。...它们之间：如果VAL在MIN和MAX之间，则使用VAL作为函数的返回值；如果VAL大于MAX，则使用MAX作为函数的返回值；如果VAL小于MIN，则使用MIN作为函数的返回值我们来看一个示例：...此时，clamp(100px, 50vw, 500px)相当于clamp(100px, 600px, 500px)，对应的VAL值是600px，大于MAX值，那么这个时候clamp()函数返回的值是MAX...此时，clamp(100px, 50vw, 500px)相当于clamp(100px, 380px, 500px)，对应的VAL值是380px，该值大于MIN值（100px），小于MAX值（500px）...此时，clamp(100px, 50vw, 500px)相当于clamp(100px, 85px, 500px)，对应的VAL值是85px，该值小于MIN值（100px），那么这个时候clamp()函数返回的值是

5.8K1 0

【前端词典】提高幸福感的 9 个 CSS 技巧

合理使用 px | em | rem | % 等单位在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。...: 750;html { font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; @media screen and (max-width...: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px...; }}// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小body { max-width: 540px; min-width:..._14: 14px; --color: 20px;}.div1{ background-color: var(--main_bgcolor); font-size: var(--font_size

7093 0

超越媒体查询：使用更新的特性进行响应式设计

between 16px and 22px */ } min()接受两个值，它们可以是相对，百分比或固定单位。...相反，如果60％的值小于600px，则将使用600px作为元素的宽度限定值 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用...clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))，例如： .box { font-size : clamp(1rem, 40px, 4rem)...在CSS中，你可以使用各种度量单位来确定元素的大小或长度，最常用的度量单位包括：px，em，rem，％，vw`和vh。虽然，还有一些不常用的单位。...(2 * 10) .5rem = 5px (.5 * 10) 注意:这也适用于百分比1%,例如 100% = 16px; 200% = 32px; 50% = 8px; rem和em单位有什么区别？

4.1K1 0

CSS中常用的一些函数

书写上一定要注意啊，加减号两边一定要有空格任何长度值都可以使用calc函数进行计算:% vh vw px em等 calc函数使DOM元素更加灵活的响应视口改变，还可以通过calc函数实现元素的绝对剧中定位...(postion:absoute;top(50vh-Xpx)) min函数(max函数) min()函数支持一个或多个表达式，每个表达式用逗号分隔，将最小的值作为返回值 clamp函数语法为clamp...(MIN,VAL,MAX)：作用是返回一个区间范围内的值，首选值为VAL，大于MAX使用MAX，小与MIN，使用MIN。...var函数用于读取变量，var函数还可以接收第二个参数，表示变量的默认值，即如果变量不存在，就使用默认值。...line-gradient 用于创建一个线性渐变的图像，需要设置起点的方向和渐变的起始颜色。未设置方向，默认是从上到下。

3704 0

响应式网页设计：使用媒体查询、视口单元和流体布局的技术

它们包括 vw（视口宽度）和 vh（视口高度），它们是视口尺寸的百分比。这些单位对于设置适应视口大小的尺寸和间距特别有用。...使用 clamp() 实现响应式字体大小使用clamp()函数可以创建流畅的排版，可以在不同的屏幕尺寸上平滑调整。 clip() 函数采用三个值：最小值、首选值和最大值。...示例：带有 clamp 的响应式字体大小 /* responsive typography using clamp() */ h1 { font-size: clamp(1.5rem, 2vw +...1rem, 3rem); margin-bottom: clamp(1rem, 1.5vw, 2rem); } 在此示例中，标题的字体大小将在 1.5rem 和 3rem 之间缩放，具体取决于视口宽度...media (min-width: 1024px) { .grid-item { flex: 1 1 31%; } } 在这个组合示例中，版式使用clamp()函数随视口缩放，标题高度使用

1691 0

每个前端开发需要了解的15个强大的CSS属性

:in-range 和:out-of-range 伪类 CSS的:in-range和:out-of-range伪类用于样式化在指定范围限制内和外的输入。...(a) :in-range 如果输入元素的当前值在 min 和 max 属性的范围之间，那么它就处于范围内。这个伪类可以方便地确定字段的当前值是否可接受。...(b) :out-of-range 如果输入元素的当前值超出了min和max属性的范围，那么它就是超出范围的。它给用户一个视觉指示，告诉他们字段值是否超出了范围。...: 2px; } 5.clamp() 函数 CSS的clamp()函数将一个值限制在两个上下界之间。...必须有一个首选值、一个最小值和一个最大值。当字体大小根据视口变化时，clamp() 会派上用场。

2622 1

分享14 个非常实用的CSS技巧

CSS :in-range 和 :out-of-range 伪类这些伪类用于对指定范围内/外的输入进行样式设置。...(a) :in-range 如果 input 元素的当前值在 min 和 max 属性的范围之间，则 input 元素在范围内。这个伪类可以很容易地确定一个字段的当前值是否可以接受。...(b) :out-of-range 如果 input 元素的当前值超出了 min 和 max 属性的范围，则 input 元素超出范围。如果字段值超出其范围，它会给用户一个视觉指示。...CSS clamp( ) 函数 CSS clamp( ) 函数将值限制在两个上限和下限之间的范围内。必须有一个首选值、一个最小值和一个最大值。...当字体大小根据视口而变化时，Clamp() 会派上用场。 CSS 代码： p{ font-size: clamp(1.8rem, 2.5vw, 2.8rem); } 6.

1.1K5 0

多行文本溢出使用展开，隐藏

showall: false, } }, computed: { textStyleObject() { return { '-webkit-line-clamp...0 20px 0; overflow: hidden; font-size: 14px; line-height: 20px; .text { position: relative...::after { position: absolute; width: 999vw; height: 999vw; margin-left: -100px; box-shadow...: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff; content: ''; } .btn { position:...: '展开▽'; } .exp { display: none; } .exp:checked + .text { max-height: 200px; } .exp

1.9K2 0

现代 CSS 解决方案：CSS 原生支持的三角函数

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如 calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。...min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。 clamp()：用于将属性值限制在一个范围内，支持三个参数：最小值、推荐值和最大值。...在现代 CSS 解决方案：CSS 数学函数一文中，我们详细介绍了 calc() min() max() clamp() 四个数学函数。...如果想要在开发中使用三角函数，可以借助转换函数 deg() 和 rad() 将角度（degree）和弧度进行转换。...40vw), calc(5 * sin(var(--angle)) * 1em))，内部使用了两个 CSS @property 变量： x 轴方向是 0px 到 80vw 的水平位移动画 y 轴方向是

4522 0

css 文字自适应大小_div自适应窗口大小

bug处理回到上面的问题，font-size:4vw，应该会使得字体的大小变化，可是他没有，和标准说的不一样，所以可以认为是一个bug。...= “#ccc”; // 再一次重绘 s.fontSize = “14px”; // 再一次回流+重绘 // 添加node，再一次回流+重绘关于重绘和回流其他方案 1. css expression...font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。...vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。...vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome

3.3K2 0

css3中的函数，你曾用几个？

css3在切图中占有半壁江山的位置，所谓人靠衣装，马靠鞍，一个网站好不好看除了设计本身，合理的布局以及完美css布局会让视觉更上一层楼今天主要分享几个在css3中常用的函数，希望看完在项目中有所思考和帮助...(min,default,max) min最小值，default默认首选值，max最大值，当default大于max,则会取max，当default小于min时，则会取min，当在min与max之间时，...通常我们可以保证一个元素的最大值与最小值，在这范围内，就获取默认值。...80% + 100px)); background-color: green; } .text .title { font-size: clamp(2rem, 2.5vw, 3rem);...} .text p.content { font-size: max(1rem, 2rem); } repeat 这个函数，如果你有用过grid布局，那么一定会有所了解，主要用于在grid-template-rows

2072 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

侧边栏布局：grid-template-columns: minmax(, ) …) 此演示对网格布局利用了 minmax 函数。...保持我的风格：clamp(, , ) 图片这里，我们介绍一些只有少数浏览器支持的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。...在本演示中，您将使用固定工具设置宽度，如下所示：width: clamp(, , ) 。这将设置绝对最小和最大尺寸以及实际尺寸。...例如，您可以编写：font-size: clamp(1.5rem, 20vw, 3rem) 。...在这种情况下，标题的字体大小将始终保持在 1.5rem 和 3rem 之间，但会根据 20vw 实际值增大和缩小以适应视口的宽度。

4.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭