Question

我在处理聚合物中的响应式UI时遇到问题，当浏览器拉伸或缩小时，内容会自动调整其宽度，但我的不是。

聚合物网站：

全宽： enter image description here

窄幅：

enter image description here

但我的是：

enter image description here

码

<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>

什么是棘手的聚合物，如何使用聚合物特征来实现这一目标？

Answer 1

这看起来像是一个css问题尝试添加

word-wrap: break-word;

到你的班级的原因是因为你所有的单词都在一行上并且它们之间没有间距所以它们没有突破到下一行也确保你没有设置特定的高度瓷砖如果你需要设置一个高度设置一个最小高度。希望这可以指出你正确的方向，很难找到一些代码来解决问题！

Answer 2

核心媒体查询是您正在寻找的。 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将为true。您可以将其与条件模板配对，以根据页面宽度更改页面的外观。

<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

如何使聚合物中的内容响应？

2 个答案: