Html 用铁介质查询将CSS应用于聚合物自定义元素

我试图使用Polymer API中的

在自定义元素上实现一个简单的“媒体查询”行为

假设我有一个容器，上面有一些文本，下面是主要内容。。 我的目标是编写媒体查询，以便当元素显示在大屏幕上（测试时，它的大小仅大于768px），我可以对元素本地DOM样式进行一些简单的边距和填充修改

我就是做不到。 这里有什么我完全错过的吗

<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" />

#头衔{
颜色：#000000；
字号：1.8em；
}
：主持人{
背景颜色：灰色；
弯曲方向：立柱；
保证金：自动；
边缘顶端：40px；
显示器：flex；
宽度：90%；
柔性生长：1；
最大宽度：1300px；
}
#头衔{
颜色：#7DB8C9；
字体大小：1.3em；
}
.内容包装器{
身高：100%；
}

[[标题]]

聚合物({
是：'内容容器'，
特性：{
标题：字符串，
isMobilePhone：布尔型
},
听众：{
“轻拍”：“吐痰”
},
spit:function（）{
log（“BOOL:+this.isMobilePhone”）；
}
});

我还尝试将整个模板（带有样式和标记）复制到“if”模板中，只修改我想要的样式，但也不起作用

---

（所有内容都在同一个文件中，即content container.html）

实现这一点的最简单方法之一（）是将Polymer与

元素模板的一个简单示例如下所示

<template>
<style>
  .content-wrapper ::content {
    color: blue;
  }

  .content-wrapper[mobile-layout] ::content {
    color: green;
  }
</style>

<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
  <content></content>
</div>
</template>

.content包装器：：内容{
颜色：蓝色；
}
.content包装器[移动布局]：：content{
颜色：绿色；
}

---

这里有一个演示它的例子

实现这一点的最简单的方法之一（）是将聚合物与

元素模板的一个简单示例如下所示

<template>
<style>
  .content-wrapper ::content {
    color: blue;
  }

  .content-wrapper[mobile-layout] ::content {
    color: green;
  }
</style>

<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
  <content></content>
</div>
</template>

.content包装器：：内容{
颜色：蓝色；
}
.content包装器[移动布局]：：content{
颜色：绿色；
}

下面是一个显示它实际运行的示例

标记在

中的任何位置（即使

dom if

）都会立即应用于元素（如图所示），因此将

放置在

dom if

中不会提供条件样式

如果使用

的唯一目的是添加条件

，那么您根本不需要该元素。只需在CSS中正常使用媒体查询：

<style>
    ...

    #title {
        color: #7DB8C9;
        font-size: 1.3em;
    }

    @media (max-width:768px) {
        #title {
            color: #000000;
            font-size: 1.8em;
        }
    }
</style>

...
#头衔{
颜色：#7DB8C9；
字体大小：1.3em；
}
@介质（最大宽度：768px）{
#头衔{
颜色：#000000；
字号：1.8em；
}
}

标记位于

中的任何位置（如果

，即使是

dom），都会立即应用于元素（如图所示），因此如果
将
放置在
dom中，则不会提供条件样式

如果使用
的唯一目的是添加条件
，那么您根本不需要该元素。只需在CSS中正常使用媒体查询：

<style>
    ...

    #title {
        color: #7DB8C9;
        font-size: 1.3em;
    }

    @media (max-width:768px) {
        #title {
            color: #000000;
            font-size: 1.8em;
        }
    }
</style>


...
#头衔{
颜色：#7DB8C9；
字体大小：1.3em；
}
@介质（最大宽度：768px）{
#头衔{
颜色：#000000；
字号：1.8em；
}
}

是否有任何具体原因使用
iron media query
而不是css
media query
进行样式设置？是否有任何具体原因使用
iron media query
而不是css
media query
进行样式设置？我明白了。。那么铁媒体质疑的目的是什么？是为了添加特定的条件标记吗？是的，您可以使用它根据媒体查询有选择地添加/删除元素。@DavidAzar我认为您不能在元素的样式中使用css媒体查询是的，但如果您想设置自定义属性或混合是的，这可能值得注意，但可能不一定适用于此问题，它不使用CSS自定义属性。忽略这个限制，媒体查询通常以元素的样式工作。。那么铁媒体质疑的目的是什么？是为了添加特定的条件标记吗？是的，您可以使用它根据媒体查询有选择地添加/删除元素。@DavidAzar我认为您不能在元素的样式中使用css媒体查询是的，但如果您想设置自定义属性或混合是的，这可能值得注意，但可能不一定适用于此问题，它不使用CSS自定义属性。忽略这个限制，媒体查询通常以元素的样式工作。很好！如何以这种方式修改：host{}元素？我的意思是，无法添加“mobile layout”属性，因为主机元素没有标记。我认为使用
reflectToAttribute
参数定义一个属性并将其用作属性选择器应该足够了（）出于某种原因，我无法使它工作。你能看一下吗？在你的财产之后，你丢失了一个
}
，你的脚本混合了html，应该是
：主机[是手机]
不是
：主机[手机布局]
（看）@tony19谢谢你们。我会接受这个答案，因为它可能对其他人也更有用，而且它更“聚合物”特定。很好！如何以这种方式修改：host{}元素？我的意思是，无法添加“mobile layout”属性，因为主机元素没有标记。我认为使用
reflectToAttribute
参数定义一个属性并将其用作属性选择器应该足够了（）出于某种原因，我无法使它工作。你能上厕所吗