我如何在calc中舍入值?
我REM的值设置为:我如何在calc中舍入值?
html {
font-size: calc(13px + ((100vw - 767px)/767));
}
它等于在767px宽屏幕,更大的更大的屏幕和更小的在小屏幕上13个像素。
所有的东西都像魅力一样,只不过我在用rems设置尺寸时用CSS动画嵌入元素transform
的时候会出现奇怪的缝隙。我做了一些测试,似乎问题在我将rem值设置为像13或14px这样的圆形值时消失。有什么方法可以将我的表情放在上面?
没有本地CSS法圆
calc
,除非你使用scss
(萨斯)是 有这样做的一个图书馆。检查 here
或者,因为它不是用calc
如果你想有一个可以使用本机方法和单位,比如em
或vm
或vh
等比calc
花费多了一个“响应”字体大小是个好主意CPU周期。
此外,如果您需要特定屏幕尺寸的特定字体大小,您可以使用CSS Media queries
。 Here is a good resource
为VW & VH实施例:
1vw = 1视口%的宽度
1vh = 1视口的高度%
1vmin = 1vw或1vh中较小的
1vmax = 1vw或1vh,以较大者为准
看到它在行动:
检查this就进一步的信息
我同意,真实用户使用的浏览器中有一半不支持'calc()'。 –
@KIKOSoftware,似乎它有一个体面的支持:http://caniuse.com/#feat=calc。 – sdvnksv
@sdvnksv是的,这是一个很好的资源来查找支持,我做了这个网址的快速扫描:https://developer.mozilla.org/en-US/docs/Web/CSS/calc向下滚动到'浏览器兼容性'。 –
提供工作的例子。 –
他在这里没有真正的理由提供一个“工作示例”。这个问题正在被完美地描述。 – Roberrrt
嗯,没有真正的舍入点不存在,因为那样你会失去细粒度控制,并且还可以定义两个或三个包含12px,13px和14px字体大小的媒体查询。除非我错过了什么? – tobiv