如何使用媒体查询覆盖聚合物中定义的属性答案

【问题标题】：how to override properties defined in polymer using media queries如何使用媒体查询覆盖聚合物中定义的属性
【发布时间】：2016-11-17 23:26:15
【问题描述】：

假设我们已经声明了一个名为 height="" 的属性，它有一个特定的值，比如说 200px。我想知道有没有一种方法可以使用 css 中的媒体查询覆盖此属性？据我所知，内联属性的优先级高于 css 样式。

这是这种情况的示例代码：

    @media (max-width:480px){

        custom-element{
            height: 50px;
        }
}

<body>
<custom-element height="200px">
</custom-element>
</body>

提前谢谢你。

【问题讨论】：

【解决方案1】：

使用!important 将赋予外部样式优先级，您可以使用样式标签来定位 div，具体如下：

custom-element[style] {
   height:50px !important;
}

最好尽量避免使用!important，但这是覆盖内联样式的少数几种方法之一。

【讨论】：

【解决方案2】：

您对属性和内联样式感到困惑。 CSS 很高兴地覆盖了内联 height 属性。

CSS

img {
  height: 100px;
  width: 100px;
  background-color:red;
}

HTML

<!-- Height is 100px -->
<img height="200px">
<!-- Height is 200px -->
<img style="height: 200px">

【讨论】：