因为最近几天给主题加了视频背景,考虑到手机端是不显示背景的,既然不显示就想着视频资源最好也别加载,给手机端省点流量,于是乎想了个骚气的判断方式。
教程
首先给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://blog.zezeshe.com/archives/js-screen-width-css.html
本站未注明转载的文章均为原创,并采用
CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
学到了,现在响应式有些元素全加载进来了(虽然看不见),但是不同端可以选择性加载的,这样可以简单判断一下是否加载了哈哈哈
对的,隐藏不等于不加载,手机端莫名其妙流量就费了
手机端居然没有背景了,这界面要是可以调透明度就更棒了。哈哈哈
透明不利于文章阅读,样式搭配不好弄