我如何在calc中舍入值?

问题描述:

我REM的值设置为:我如何在calc中舍入值?

html { 
    font-size: calc(13px + ((100vw - 767px)/767)); 
} 

它等于在767px宽屏幕,更大的更大的屏幕和更小的在小屏幕上13个像素。

所有的东西都像魅力一样,只不过我在用rems设置尺寸时用CSS动画嵌入元素transform的时候会出现奇怪的缝隙。我做了一些测试,似乎问题在我将rem值设置为像13或14px这样的圆形值时消失。有什么方法可以将我的表情放在上面?

+0

提供工作的例子。 –

+3

他在这里没有真正的理由提供一个“工作示例”。这个问题正在被完美地描述。 – Roberrrt

+1

嗯,没有真正的舍入点不存在,因为那样你会失去细粒度控制,并且还可以定义两个或三个包含12px,13px和14px字体大小的媒体查询。除非我错过了什么? – tobiv

没有本地CSS法圆calc,除非你使用scss(萨斯)是 有这样做的一个图书馆。检查 here

或者,因为它不是用calc如果你想有一个可以使用本机方法和单位,比如emvmvh等比calc花费多了一个“响应”字体大小是个好主意CPU周期。

此外,如果您需要特定屏幕尺寸的特定字体大小,您可以使用CSS Media queriesHere is a good resource

为VW & VH实施例:

1vw = 1视口%的宽度
1vh = 1视口的高度%
1vmin = 1vw或1vh中较小的
1vmax = 1vw或1vh,以较大者为准

看到它在行动:

enter image description here

检查this就进一步的信息

+1

我同意,真实用户使用的浏览器中有一半不支持'calc()'。 –

+3

@KIKOSoftware,似乎它有一个体面的支持:http://caniuse.com/#feat=calc。 – sdvnksv

+0

@sdvnksv是的,这是一个很好的资源来查找支持,我做了这个网址的快速扫描:https://developer.mozilla.org/en-US/docs/Web/CSS/calc向下滚动到'浏览器兼容性'。 –