Question

我正在尝试在我的主页背景中添加视频。基本上我想避免在浏览器分辨率与我的视频分辨率不同的情况下使用黑带。

为了优化加载时间，我想用较少的css来做，所以我试着用这样的方式定义值：

@videoHeight: '1080';
@videoWidth: '2048';

@alphaVideo: '1,9';

@winHeight:'$(window).height()';
@winWidth:'$(window).width()';


@alphaWin: @winHeight/@winWidth;



@media only screen and (min-width: @alphaVideo * @winHeight) { 
    #video-background { 
   transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
    }
}

但是我的浏览器出现以下错误： OperationError：对无效类型的操作在video.less on line null，第0列：

1 @ videoWidth：'2048';

我该如何解决这个问题？

由于

Answer 1

问题是你正在尝试对字符串执行数学运算（除法，乘法）。 LESS可以用字符串做的唯一事情是将它们连接起来。引用变量使它成为一个字符串，所以除非你真的想要一个字符串，否则不要这样做：

@videoHeight: 1080;
@videoWidth: 2048;

Answer 2

LESS是一个CSS 预处理器，这意味着它可以在之前处理甚至知道浏览器环境。当LESS是服务器端编译时（建议），这是绝对正确的。如果LESS是客户端编译的话，你可以知道浏览器本身（例如窗口大小）（不推荐，因为它会与你想要的状态相反，“优化加载时间”）。

总结一下：你既不能优化加载时间，也不能意识到实际的浏览器大小。

使用较少的CSS调整视频大小取决于屏幕大小

2 个答案: