分享个通过CSS让JS判断屏幕宽度的方法

考虑到手机端是不显示背景的，既然不显示就想着视频资源最好也别加载，给手机端省点流量，于是乎想了个骚气的判断方式。

教程

首先给 css 部分加入如下代码，其中使用媒体查询设置了 5 个断点，一般常见框架断点都是这样的，默认 content 的值是 0，随着屏幕宽度的变化分别赋值 1 -5。

html {content: "0";}
@media (min-width: 640px) { 
    html {content: "1";}
}
@media (min-width: 768px) { 
    html {content: "2";}
}
@media (min-width: 1024px) { 
    html {content: "3";}
}
@media (min-width: 1280px) { 
    html {content: "4";}
}
@media (min-width: 1536px) { 
    html {content: "5";}
}

然后我们使用下方的 js 获取这个值，最后使用 if 语句判断值大于某数值时才会执行某些操作，比如我就是判断值大于等于 4 时才会把视频地址赋值给 video 标签。

var content = getComputedStyle(document.documentElement).getPropertyValue('content');
content=content.replace('"','').replace('"','');
if(content>0){...}

这么写非常适合配合 css 框架实现不同屏幕下执行不同 js 函数。