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

泽泽社长

发布于 2023-04-17 14:29:02

2.4K00

代码可运行

文章被收录于专栏：泽泽社泽泽社

运行总次数：0

代码可运行

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

首先给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函数。

linkCard('.post-content','0');

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css