使用Iron-Media-Query將CSS應用於Polymer自定義元素

Question

我正在嘗試使用Polymer API中的<iron-media-query>在自定義元素上實現簡單的“ media-query”行為。

假設我有一個容器，頂部有一些文本，下面是主要內容。.我的目標是編寫媒體查詢，以便當元素在大屏幕上顯示時（對於我的測試，剛好大於768px），我可以對元素本地DOM樣式進行一些簡單的邊距和填充修改。

我只是無法使其工作。 我在這里完全錯過了什么嗎？

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

<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>

<template is="dom-if" if="{{isMobilePhone}}">

    <style>
        #title {
            color: #000000;
            font-size: 1.8em;
        }
    </style>


</template>


<template>
    <style>
        :host {
            background-color: gray;
            flex-direction: column;
            margin: auto;
            margin-top: 40px;
            display: flex;
            width: 90%;
            flex-grow: 1;
            max-width: 1300px;
        }

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

        .content-wrapper {
            height: 100%;
        }
    </style>


    <p id="title">
        [[title]]
    </p>

    <div class="content-wrapper">
        <content select=".content"></content>
    </div>

</template>




<script>
    Polymer({

        is: 'content-container',
        properties: {
            title: String,
            isMobilePhone: Boolean
        },
        listeners: {
            'tap': 'spit'
        },
        spit: function() {
            console.log("BOOL: " + this.isMobilePhone);
        }

    });
</script> </dom-module>

我還嘗試將整個模板（帶有樣式和標記）復制到“ if”模板中，然后只修改我想要的樣式，但是它也不起作用。

（所有內容都在同一個文件中，即content-container.html）

Answer 1

實現此目的最簡單的方法之一（在iron-media-query演示中使用的一種方法 ）是將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>

這是一個擺弄它的小提琴

Answer 2

在<dom-module> （甚至dom-if ）內任何地方的<style>標記都會立即應用於元素（如本演示中所示 ），因此將<style>放入dom-if不會提供條件樣式。

而且，如果使用<iron-media-query>的唯一目的是添加條件<style> ，則根本不需要該元素。 只需在CSS中正常使用媒體查詢即可：

<style>
    ...

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

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

碼筆