标签搜索
隐藏侧边栏

大屏显示下如何设置不同的样式?-fullscreen

搞前端的半夏
2022-05-10 / 0 评论 / 0 点赞 / 174 阅读 / 2,877 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

最近公司在做大屏显示,不过这个页面可以在大屏下显示,也可以在电脑上显示,不过显示的内容是不同的。

公司是用的小米电视,通过投屏来显示大屏,当投屏的时候,页面会自动隐藏一些。对于这个需求是使用

Document.onfullscreenchange 来进行设置的。效果还是不错的!但是因为最近在学习CSS,所以还是去搜了搜CSS的解决方案,没想到还真有::fullscreen,这是一个伪类。

前言

实话实说,就这兼容性,我觉得用起来完全没问题,而且我司只需要考虑Chrome就行!!!

image-20211103205729937

前置知识

js中提供了两种全屏的的使用方法:

  1. Element.requestFullscreen():此方法会将浏览器设置为全屏模式,同时只有当前Element会显示在页面上,其他所有的元素全部被隐藏
  2. document.documentElement.requestFullscreen():此方法是对所有元素使用全屏。

正是因为这两种使用方法,导致我们在使用:fullscreen的时候也是两种使用方法。

:fullscreen

:fullscreen 是一个CSS伪类,当网页位于全屏的情况下,可以设置元素的全屏样式。

提一嘴:MDN上给出了一个例子,但是代码并没有给全,导致我在一开始使用,页面并没有显示出效果。

用法1- 全局

 #h1Full:fullscreen {
  color: #faa;
}
 :fullscreen #h1Full1{
  color: #faa;
}

 <h1 id="h1Full">我是h1Full:fullscreen</h1>
 <h1 id="h1Full1">我是fullscreen: #h1Full1</h1>

当我使用document.documentElement.requestFullscreen()对全部元素全屏的时候:此时会发现 #h1Full:fullscreen 这中写法并不会生效,此时:fullscreen应该是放在根元素上的(我猜测的)

image-20211103214345635

用法2- 针对特定元素

上面我们还提到了Element.requestFullscreen(),这种全屏的方法。直接看下例子:

 #h1Full:fullscreen {
  background-color: aliceblue;
  color: #faa;
}
 :fullscreen #h1Full1{
  color: #faa;
}

 <h1 id="h1Full">我是h1Full:fullscreen</h1>
 <h1 id="h1Full1">我是fullscreen: #h1Full1</h1>

在控制台种:使用document.getElementById('h1Full').requestFullscreen(),仅仅对h1Full进行了全屏,其他元素隐藏掉了。同时#h1Full:fullscreen 这种写法生效,并且元素占据了整个屏幕。

image-20211103214806444

总结

对于大屏在不同的设备下需要不同的显示方式,使用:fullscreen是比较好的实现方案。当然考虑到兼容的话,可以考虑Document.onfullscreenchange来给元素设置样式

tips

使用快捷键设置全屏,:fullscreen 是无法生效的

前言

最近公司在做大屏显示,不过这个页面可以在大屏下显示,也可以在电脑上显示,不过显示的内容是不同的。

公司是用的小米电视,通过投屏来显示大屏,当投屏的时候,页面会自动隐藏一些。对于这个需求是使用

Document.onfullscreenchange 来进行设置的。效果还是不错的!但是因为最近在学习CSS,所以还是去搜了搜CSS的解决方案,没想到还真有::fullscreen,这是一个伪类。

前言

实话实说,就这兼容性,我觉得用起来完全没问题,而且我司只需要考虑Chrome就行!!!

image-20211103205729937

前置知识

js中提供了两种全屏的的使用方法:

  1. Element.requestFullscreen():此方法会将浏览器设置为全屏模式,同时只有当前Element会显示在页面上,其他所有的元素全部被隐藏
  2. document.documentElement.requestFullscreen():此方法是对所有元素使用全屏。

正是因为这两种使用方法,导致我们在使用:fullscreen的时候也是两种使用方法。

:fullscreen

:fullscreen 是一个CSS伪类,当网页位于全屏的情况下,可以设置元素的全屏样式。

提一嘴:MDN上给出了一个例子,但是代码并没有给全,导致我在一开始使用,页面并没有显示出效果。

用法1- 全局

 #h1Full:fullscreen {
  color: #faa;
}
 :fullscreen #h1Full1{
  color: #faa;
}

 <h1 id="h1Full">我是h1Full:fullscreen</h1>
 <h1 id="h1Full1">我是fullscreen: #h1Full1</h1>

当我使用document.documentElement.requestFullscreen()对全部元素全屏的时候:此时会发现 #h1Full:fullscreen 这中写法并不会生效,此时:fullscreen应该是放在根元素上的(我猜测的)

image-20211103214345635

用法2- 针对特定元素

上面我们还提到了Element.requestFullscreen(),这种全屏的方法。直接看下例子:

 #h1Full:fullscreen {
  background-color: aliceblue;
  color: #faa;
}
 :fullscreen #h1Full1{
  color: #faa;
}

 <h1 id="h1Full">我是h1Full:fullscreen</h1>
 <h1 id="h1Full1">我是fullscreen: #h1Full1</h1>

在控制台种:使用document.getElementById('h1Full').requestFullscreen(),仅仅对h1Full进行了全屏,其他元素隐藏掉了。同时#h1Full:fullscreen 这种写法生效,并且元素占据了整个屏幕。

image-20211103214806444

总结

对于大屏在不同的设备下需要不同的显示方式,使用:fullscreen是比较好的实现方案。当然考虑到兼容的话,可以考虑Document.onfullscreenchange来给元素设置样式

tips

使用快捷键设置全屏,:fullscreen 是无法生效的

0

评论区