css - 如何使 polymer 中的内容响应？

Question

我在处理 polymer 中的响应式 UI 时遇到问题，当浏览器拉伸(stretch)或变窄时，内容会自动调整其宽度，但我的不会。

polymer 网站:

全宽:

窄宽度:

但我的是:

代码:

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/core-scroll-threshold/core-scroll-threshold.html">
<link rel="import" href="/bower_components/core-item/core-item.html">
<polymer-element name="catalog-layout" attributes="category toast">
  <template>
    <style shim-shadowdom>
      html,
      body {
        font-family: "RobotoDraft", sans-serif;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        background-color: #fafafa;
        font-weight: 300;
        height: 100%;
      }
      body {
        margin: 0;
        color: #333;
      }
      core-scroll-header-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #eee;
      }
      /* background for toolbar when it is at its full size */
      core-scroll-header-panel::shadow #headerBg {
        background: #5cebca;
      }
      /* background for toolbar when it is condensed */
      core-scroll-header-panel::shadow #condensedHeaderBg {
        background-color: #f4b400;
      }
      core-toolbar {
        color: #f1f1f1;
        fill: #f1f1f1;
        background-color: transparent;
      }
      .title {
        -webkit-transform-origin: 0;
        transform-origin: 0;
        font-size: 40px;
      }
      .contentcontainer {
        word-wrap: break-word;
        padding: 8px;
      }
      /*.contentcontainer{
          margin-top:40px;
          height:100%;
        }*/
    </style>
    <core-ajax id="catalogajax" auto method="GET" params='{"offset":{{offset}}}' headers='{"Access-Control-Allow-Origin":"*","X-Requested-With": "XMLHttpRequest"}' url="http://farefair.com:8888/api/v1/article/catalog" handleAs="json" response="{{response}}"></core-ajax>
    <core-scroll-header-panel id="scrollpanel" condenses="true" keepCondensedHeader scrollAwayTopbar="false">
      <core-toolbar class="tall">
        <paper-icon-button icon="arrow-back"></paper-icon-button>
        <div flex></div>
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
        <div id="title" class="bottom indent title">{{category}}</div>

      </core-toolbar>
      <div layout vertical flex id="catalogcontainer" class="contentcontainer">
        <template repeat="{{articlecatalog in articlecatalogs}}">
          <div layout horizontal class="rowcontent">
            <div flex></div>
            <div flex three>
              <!-- <core-selector> -->
              <div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;">
                <!-- <div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">A</div> -->
                <div style="font-size: 22px; padding: 8px 0 16px; color: #888;"><a href="/article/{{category}}/{{articlecatalog.title}}">{{articlecatalog.title}}</a>
                </div>
                <div style="font-size: 16px; padding-bottom: 8px;">ccccccccccccasdsadsadsadscccccccccccccccccccccc</div>
                <div style="font-size: 12px;">bbbbbbbbbbbbbbbbbbbasdsabbbbbbbbbbbsadsadsbbdsasadsadsadsdsbbbbbbbb</div>
                <div style="font-size: 12px;">aaaaaaaaaaaaaaaaaaaaad aaaaaaaaaaaaasadssdsadsadsdsaaaaaaaaaaaaaaa</div>
              </div>
              <!-- </core-selector> -->
            </div>
            <div flex></div>
          </div>
        </template>
      </div>
    </core-scroll-header-panel>

    <!-- <content class="content"></content> -->
  </template>
  <script>
    Polymer('catalog-layout', {
      domReady: function() {
        this.offset = 0;
        this.articlecatalogs = {};
        var titleStyle = this.$.title.style;
        this.addEventListener('core-header-transform', function(e) {
          var d = e.detail;
          var m = d.height - d.condensedHeight;
          var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
          titleStyle.transform = titleStyle.webkitTransform =
            'scale(' + scale + ') translateZ(0)';
        });
        var ajax = this.$.catalogajax;
        that = this;
        this.articlecatalogs = [];
        ajax.addEventListener("core-response", function(e) {
          if (this.response == null) {} else {
            that.articlecatalogs = that.articlecatalogs.concat(this.response);
          }
        });
        scrollpanel = this.$.scrollpanel;
        scrollpanel.addEventListener('scroll', function(e) {
          if (e.detail.target.scrollTop >= e.detail.target.scrollHeight - e.detail.target.offsetHeight - 100) {
            that.offset += 10;
          }
        });
      },

    });
  </script>
</polymer-element>

什么是trickyin polymer，如何利用polymer的特性来完成？

Answer 1

core-media-query 就是您要找的。 https://www.polymer-project.org/0.5/docs/elements/core-media-query.html

<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>

如果页面大小小于 640px，则使用上面的行，phoneScreen 将为真。您可以将其与条件模板配对，以根据页面宽度更改页面的外观。

<template if="{{phoneScreen}}">
  // do something to page when small 
</template>

<template if="{{!phoneScreen}}">
  // do something to page when big
</template>

这是一个介绍如何使用它的视频。如果我还能提供帮助，请告诉我。

https://www.youtube.com/watch?v=svfu9iQ8cyg