我正在尝试在首页背景中添加视频。基本上，当浏览器分辨率与我的视频分辨率不同时，我想避免在侧面出现黑带。
为了优化加载时间，我想使用更少的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：对null。栏第0列的video.less中的无效类型进行操作：
1 @ videoWidth：'2048';
我怎样才能解决这个问题？
谢谢
LESS是CSS预处理器，这意味着它经过设计即可在不了解浏览器环境的情况下进行处理。当LESS是在服务器端编译时（建议），这绝对是正确的。如果LESS是在客户端编译的，则可以了解浏览器本身（例如，窗口大小）（不建议这样做，因为这与您声明的“优化加载时间”相反）。
总结一下：您不能同时优化加载时间，也不能让LESS知道实际的浏览器大小。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句