html - 如何将@media 与@supports 一起使用

Question

经过几个月的搜索，我终于找到了 Firefox 的 hack，如下：

@supports(max-width: 768px) 
and (-moz- 
appearance:meterbar)
{.parallax-window 
{background-image: 
url("http://4309.co.uk/wp-  
content/uploads/2020/ 
01/Screenshot_2020012
5_205147.jpg") !important; 
background-repeat: repeat; 
}} 

确定代码@supports(max-width: 768px) and (-moz-appearance:meterbar)在移动设备上运行良好（正如我写的那样），只是在桌面上出现故障。

部分移动视图图像显示在桌面视图中，尽管它仅通过“（最大宽度：768px）”限制​​在移动视图中，如上所示。

桌面的大部分页面都是黑色的，就像想要的一样，是使用 element 制作的.parallax-window；只是顶部的一小部分有移动视图图像。不知道这是怎么回事。

我试过了：

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) 
{.parallax-window 
{background-color: black;}}

和

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) 
{.parallax-window 
{background-color: black;}}

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) 
{.parallax-window 
{background-color: black;}}

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) {body, 
html {background-color: 
black;}}

一切都无济于事。

html

<div id="content" 
class="main-container">
<section class="content- 
area  pt0 ">
<div id="main" class="" 
role="main">
<div 
id="shapely_home_parallax- 
2" class="widget 
shapely_home_parallax">      
<section class="cover 
fullscreen image-bg">
<div class="parallax-window 
fullscreen" data- 
parallax="scroll" data- 
image- 
src="http://4309.co.uk/wp-  
content/uploads
/2019/08/download-2.png" 
data-ios-fix="true" data- 
over-scroll-fix="true" 
data-android-fix="true">
<div class="align- 
transform">
<div class="row">
<div class="top-parallax- 
section">

这里

标签： htmlcssfirefox