作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用 transform: scale 我的宽度变为 80vw 并且我的高度是自动的。所以这就是我想要的 = transform: scale(80vw, auto);
。不幸的是,这不起作用。有没有另一种方法来获得这种效果。最好不使用 javascript。
最佳答案
var range = 1 / 400;
var vw = range * Math.min(window.innerWidth, window.innerHeight);
document.documentElement.style.setProperty('--vw-scale', `${vw}`);
window.addEventListener('resize', () => {
document.documentElement.style.setProperty('--vw-scale', `${range * Math.min(window.innerWidth, window.innerHeight)}`);
});
.scale-element {
width: 400px;
transform: scale(var(--vw-scale));
transform-origin: left top;
}
h1 {
font-size: 25px;
}
<div class="scale-element">
<h1>Test title</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, et. Deserunt officiis provident quod perferendis dolore dolores enim sint veniam ea odio ratione, repudiandae distinctio, aliquid possimus commodi cupiditate voluptas!
</p>
</div>
即使不直接使用 calc 函数,它的工作方式也很接近。对于测试和调整屏幕大小,您应该在整页选项中查看它。
关于css - 变换:使用视口(viewport)单位进行缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52467896/
我正在尝试获得一个按钮,按下该按钮时会改变颜色。当再次按下时,它应该变回原来的颜色。我究竟做错了什么? 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀!