Question

PHP模板：

  <div 
class="el" 
data-spacetop="<?php echo $spacetop; ?>" 
data-spaceleft="<?php echo $spaceleft; ?>" 
data-spacetopmobile="<?php echo $spacetopmobile; ?>" 
data-spaceleftmobile="<?php echo $spaceleftmobile; ?>"></div>

HTML：

<div class="el" data-spacetop="228" data-spaceleft="876" data-spacetopmobile="90" data-spaceleftmobile="20"></div>

CSS：

 .el {
        padding-top: attr(data-spacetop) px;
        padding-left: attr(data-spaceleft) px;
    }

@media screen and (max-width:600px) {
    .el {
        padding-top: attr(data-spacetopmobile) px;
        padding-left: attr(data-spaceleftmobile) px;
    }
}

如果这样可行，那就太棒了。不幸的是，尽管W3C草案已经存在了很长时间（https://caniuse.com/#feat=css3-attr），但事实并非如此。

你会如何解决这个问题？不支持不幸的内联媒体查询。

Answer 1

如果您需要支持现代浏览器，则可以使用新的CSS custom properties代替data-attributes和attr()

Codepen demo

<强>标记

<div class="el" 
style="
   --spacetop:40px;
   --spaceleft:20px;
   --spacetopmobile:10px;
   --spaceleftmobile:5px
"></div>

<强> CSS

.el {
  border: 1px #bc9 dashed;
  padding-top: var(--spacetop);
  padding-left: var(--spaceleft);
}

@media screen and (max-width:600px) {
  .el {
    padding-top: var(--spacetopmobile);
    padding-left: var(--spaceleftmobile);
  }
}

Answer 2

这种语法是正确的：

padding-top: attr(data-spacetop px);

和

padding-top: attr(data-spacetop px,fallback);

但在上述两种方法中使用此属性并不支持主流浏览器。

整数的CSS attr（）：解决这个问题的好方法是什么？

2 个答案: