分享个通过CSS让JS判断屏幕宽度的方法
2023-06-13 09:18:40 时间
因为最近几天给主题加了视频背景,考虑到手机端是不显示背景的,既然不显示就想着视频资源最好也别加载,给手机端省点流量,于是乎想了个骚气的判断方式。 教程
首先给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');
相关文章
- js实现replaceAll方法
- js remove方法_js清除session
- js格式化CSS样式代码的方法
- js获取当前系统时间详解编程语言
- JS获取数组长度(length属性)
- JS currentStyle属性和getComputedStyle()方法:读取CSS显示样式
- 把JS与CSS写在同一个文件里的书写方法
- js模拟画笔效果
- JscallBack返回前一页的js方法
- jQuery库与其他JS库冲突的解决办法
- JS的replace方法详细介绍
- js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
- select标签模拟/美化方法采用JS外挂式插件
- asp.net中js和jquery调用ashx的不同方法分享
- IIS启用GZIP压缩js、css无效的原因及解决方法
- JS过滤url参数特殊字符的实现方法
- Asp.net后台添加CSS、JS、Meta标签的方法
- js获取input点选按钮的值的方法
- JS使用getComputedStyle()方法获取CSS属性值
- PHP小技巧之JS和CSS优化工具Minify的使用方法
- 不到30行JS代码实现Excel表格的方法
- node.js中的http.get方法使用说明
- node.js中的fs.truncate方法使用说明
- node.js中的fs.fchown方法使用说明
- Asp.net程序优化js、css实现合并与压缩的方法
- phpci框架中加载css和js文件失败的原因及解决方法
- js动态修改css文件的方法
- js中直接声明一个对象的方法
- JS清除选择内容的方法
- js中实现多态采用和继承类似的方法