纸盒面板上的响应式布局不起作用

Responsive layout on paper-drawer-panel not working

本文关键字：响应 布局 不起作用      更新时间：2023-09-26

我创建了一个新的polymer站点，如果我在手机上打开它，响应式设计就不起作用。（但我应该这样做，因为这是一个抽屉式的面板）

===>https://www.sese7.de/polymer/

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="import" href="elements/elements.html">
</head>
<body>
    <home-main>
        <login-main>
        </login-main>
    </home-main>
</body>
</html>

模块：

<dom-module id="home-main">
<template>
    <style>
    </style>
    <paper-drawer-panel id="pdp">
        <div drawer style="background-color: #dfdfdf;">
        </div>
        <div main>
            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            </paper-toolbar>
            <content></content>
        </div>
    </paper-drawer-panel>
</template>
<script>
    Polymer({
        is: "home-main"
    });
</script>
</dom-module>

我的问题在哪里？对不起，我是聚合物的新手。

提前感谢；）

您的布局看起来确实很有响应性，但如果您在HTML <head>中添加了适当的元标记，它在移动设备上可能会更好。试试这个：

<head>
    <!-- Add this -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="import" href="elements/elements.html">
</head>
相关文章：