php - CSS:动态类/属性和媒体查询——如何解决这个难题？

Question

为插件编写扩展我可以使用 PHP 更改 HTML 元素的所有属性。

$attributes["style"] .= 'padding-left:10px;';
array_push($attributes["class"], "long-container");
array_push($attributes["class"], "super smooth");
$attributes["data-whatever"] = "great";

现在我想让用户能够动态输入 div 的宽度/高度比率(@Web_Designer 的回答中描述了如何执行此操作的解决方案:Maintain the aspect ratio of a div with CSS)。

在我可以更改第三方插件输出的函数中，我编写了以下代码来根据输入计算宽高比。因为我的盒子的高度是:

if( !empty( $args['stretchy-desktop'] ) ) {
    $sd = array_map('trim',explode(":",$args['stretchy-desktop']));

    if(count($sd)==2) {
        $sd[0] = floatval(str_replace(",",".",$sd[0]));
        $sd[1] = floatval(str_replace(",",".",$sd[1]));

        if($sd[0]>0 && $sd[1]>0) {
            $padding = ($sd[1] / $sd[0])*100;
            array_push($attributes['class'], 'stretchy-desktop');
            $attributes['style'] .= 'padding-bottom:'.$padding.'%;';
        }
    }
}

很好吧？但是，现在用户希望能够为移动设备输入不同的重量高度比以及不同的动态最小高度 对于移动设备，这就是我被困住的地方。

1) 现在无法提供内联@media 查询，否则我的解决方案将是这样的 (Is it possible to put CSS @media rules inline?):

$attributes['style'] .= '@media (min-width:540px) {padding-bottom:'.$padding.'%;}@media (max-width:539px) {padding-bottom:'.$padding_mobile.';}';

2) 目前无法在 CSS 中使用 HTML 属性值 (CSS values using HTML5 data attribute)，否则我的解决方案将是这样的:

$attributes['data-desktoppadding'] = $padding;
$attributes['data-mobilepadding'] = $padding_mobile;

在 CSS 中:

@media (min-width:540px) {
.long-container {
padding-bottom: attr(data-desktoppadding);
}
}

@media (max-width:539px) {
.long-container {
padding-bottom: attr(data-mobilepadding);
}
}

3) 由于值是动态数字，我无法为每个可能的现有 float 定义一个 CSS 类。

当然我可以使用 JavaScript，但我们都知道它的重大缺点(包括丑陋的页面加载)。

你能想到任何解决这个难题的 CSS 解决方案吗？

Answer 1

这是我想出的解决方案。它涉及在目标元素周围创建一个包装器 div。基本上，其工作方式是为移动模式分配外层 div 的内联样式，为桌面模式分配内联样式的内层 div。当浏览器窗口的大小调整到低于桌面 View 的阈值时，它会将内部 div 的(桌面) 内联样式重置为默认值，以便 外部 div 的(移动) 内联样式接管。当浏览器窗口的大小调整到高于阈值时，它将外部 div 的(移动) 内联样式重置为默认值，以便内部 div 的(桌面) 内联样式接管。它覆盖内联样式的方法是在 CSS 媒体查询的规则集中使用 !important 关键字。

我认为不用说，下面代码片段中的内联样式将替换为您的 $attributes['style']。但由于您将拥有单独的移动和桌面样式，我猜它会是 $attributes['style-mobile'] 和 $attributes['style-desktop']。

@media (min-width:540px) {
    .padding-mobile {
        padding-bottom:0 !important;
        width: auto !important;
    }
}
			
@media (max-width:539px) {
    .padding-desktop {
        padding-bottom:0 !important;
        width: auto !important;
    }
}

<div class="padding-mobile" style="width:100%;background-color:red;padding-bottom:100%;">
    <div class="padding-desktop" style="width:50%;background-color:red;padding-bottom:25%;">
				
				
    </div>
</div>