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

标签 html css responsive-design polymer-1.0 paper-elements

在我的代码中,调整浏览器大小时,纸盒面板会折叠,但当我在手机中尝试时,它不会折叠。

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

我使用的是聚合物 1.0

最佳答案

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

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

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

关于html - 聚合物纸抽屉面板响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32804930/

相关文章:

css - 强制内联显示响应式图像

javascript - 使用响应式设计避免移动客户端下载大图像

PHP/CSS 随机背景

javascript - 带有溢出滚动的温泉 2.0 列表不起作用

jquery - 使用 jQuery 进行表操作

html - 如何在固定背景上的同一行上放置多个非重叠元素

css - 在媒体查询中为高分辨率设备设置大字体

jquery - Bootstrap Carousel - 根本不循环

css - 如何在 SCSS 中将样式应用于父项和子项

jquery - 在 bootstrap 上固定一列