聚合物纸抽屉面板响应式设计

Question

在我的代码中，纸抽屉面板在调整浏览器大小时折叠，但当我在移动设备上尝试时 phone 它不会折叠。

<!DOCTYPE html>
<html>
<head>
    <title>PolyPolymer</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="elements.html">
</head>
<body fullblead layout vertical fit>
    <paper-drawer-panel responsive-width="800px">
        <paper-header-panel flex drawer>
            <paper-toolbar>
            <div class="title middle">Heading</div>
            </paper-toolbar>
            <div class="bottom row fit bottom">
            </div>
        </paper-header-panel>
        <paper-header-panel flex main>
        <paper-toolbar>
          <paper-ripple center></paper-ripple>
          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            <div flex class="indent title">Heading</div>
            </paper-toolbar>                
            <div>
             page content
            </div>
        </paper-header-panel>
    </paper-drawer-panel>
</body>
</html>

我正在使用 Polymer 1.0

Answer 1

这是我苦苦挣扎了一段时间的事情，对我有用的是将此片段放在头部。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我希望它像对我一样对你有用:)

聚合物纸抽屉面板响应式设计

Polymer paper-drawer-panel Responsive design

html

css

responsive-design

paper-elements

polymer-1.0

聚合物纸抽屉面板 响应式设计

Polymer paper-drawer-panel Responsive design

html

css

responsive-design

paper-elements

polymer-1.0

聚合物纸抽屉面板响应式设计