分享个通过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函数注意：本文作者：泽泽大佬