背景

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

6个月前 typecho帮助 55°C

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

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

注意:本文作者:泽泽大佬

版权声明:小站所有内容均为互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系删除。
本文链接:https://magicblue.cn/lost/14934.html
最后编辑: 23年04月05日

选择表情

网友评论

5个月前

所以说 这个主题官网挂了 应该在哪里买

6个月前

已经升1.2.1了

7个月前
头像 csp

抱抱

7个月前
头像 csp

有点惨啊

7个月前

支持支持一下