紧急情况- CSS -比例- Calc -视图端口
紧急情况- CSS -比例- Calc -视图端口
提问于 2018-04-02 15:49:46
我不是一个程序员(这很快就会变得明显)，但我正在为一个工作项目工作，我被困在最后一点。
我需要在刻度中添加一个calc()，但是它不能工作。没有深入了解我为什么需要这个，我知道通常会有更好的方法来做我想要实现的事情，但我只想知道我怎样才能让它以我需要的方式工作。
我希望用Transform: Scale()来调整相对于viewport大小的大小。根据我的研究假设，我使用100 my和我的其他工作添加了calc()函数。
我已经把我所处的位置远远低于刻度函数的工作原理，也就是说，从0到1的独立值会将标度改变到100%。Calc()函数与基本和很好地工作，即10-5提供了5%和500%的缩放值，但一旦我添加100 it，它就停止工作，请帮助！
正文{
margin: 0;
padding: 0;
width: 100vw;
text-align: center;}
#wrap {
width: 1535;
height: 900;
padding: 0;
overflow: hidden;}
#frame {
width: 1535;
height: 900;
overflow: hidden;
-webkit-transform: scale(calc(100vw/1535));
-webkit-transform-origin: 0 0;}
回答 1
Stack Overflow用户
发布于 2018-04-02 18:55:13
这里有两件事。
- 您的
#wrap和#frame需要在它们的宽度上有某种单元。因此，这是您改变大小相对于视口的机会。例如，如果您希望在视口为192 be宽时，其宽度为1535 be，但您希望它们在视口缩小时保持该比率，则将其设置为79.947917vw宽度。(1535 / 1920 = 0.79947917)。你也可以用高度做一些类似的事情。 - 规模转换不需要单位。比例尺采用无单位数，它是元素原始大小的倍数。因此，
scale(2)是正常值的两倍，或者scale(0.5)是正常值的一半。您还可以使用两个数字来不同地调整元素的宽度和高度。例如，scale(2, 3)将使元素增长到原来宽度的两倍和原始高度的三倍。
由于转换是相对于元素而不是相对于文档的，这意味着您不需要在转换表达式中使用任何类型的calc，因为随着视图端口的缩小和增长，元素本身的收缩和增长也会导致缩放量按比例缩小和增长。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49614374
复制相关文章
相似问题
腾讯云开发者
