如何让这个聚合物应用程序响应?
How to make this polymer app responsive?
https://gdg-test-ch.firebaseapp.com/
一排三张牌,但右边有一些空的space。在移动视图中 space 变大。工具栏或导航栏是否适合浏览器。
如何让它响应?
卡片-view.html(卡片元素)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" />
<dom-module id="card-view">
<template>
<style include="iron-flex iron-flex-layout">
/* local styles go here */
:host {
display: block;
max-width: 1450px;
}
.card {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
</style>
<!-- local DOM goes here -->
<div class="container flex layout horizontal wrap">
<template is="dom-repeat" items="{{list}}">
<div class="card">
<paper-card heading="{{item.first}}" image="../image/{{item.last}}.jpg">
<div class="card-actions">
<paper-button>Explore!</paper-button>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat"></paper-icon-button>
</div>
</paper-card>
</div>
</template>
</div>
</template>
<script>
Polymer({
is: 'card-view',
ready: function() {
this.list = [
{first: 'Bob', last: 'i'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'}
];
}
});
</script>
</dom-module>
Index.html(主页)
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/card-view.html" />
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html" />
</head>
<body>
<style>
a,.anchor-like,
.markdown-html a{
color: var(--default-primary-color);
text-decoration:none;
}
body {
background-color: #FF5722;
}
</style>
<paper-toolbar>
<span class="title">Title</span>
</paper-toolbar>
<card-view></card-view>
</body>
</html>
好的,所以你想让卡片位于中间,并在卡片离开屏幕之前让行的长度变小。
你需要媒体查询和一些数学:-)
每张卡片的宽度为 300 像素 + 5 像素的边距(每边),这意味着每张卡片在屏幕上占据 space 的 310 像素。
假设我们永远不想连续显示超过 4 张卡片,这意味着我们永远不想 'card-view' 具有 4x310 像素(1240 像素)的更大尺寸
当 space 小于 1240px 时,我们想更改为 3x310px 等等。
card-view {
display: block;
margin: 0 auto;
}
@media screen and (min-width: 1240px) {
card-view {
width: 1240px;
}
}
@media screen and (min-width: 930px) and (max-width: 1239px) {
card-view {
width: 930px;
}
}
@media screen and (min-width: 620px) and (max-width: 929px) {
card-view {
width: 620px;
}
}
@media screen and (min-width: 310px) and (max-width: 619px) {
card-view {
width: 310px;
}
}
这里有一个link的概念https://jsfiddle.net/link2twenty/bzr9wt00/
https://gdg-test-ch.firebaseapp.com/
一排三张牌,但右边有一些空的space。在移动视图中 space 变大。工具栏或导航栏是否适合浏览器。
如何让它响应?
卡片-view.html(卡片元素)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" />
<dom-module id="card-view">
<template>
<style include="iron-flex iron-flex-layout">
/* local styles go here */
:host {
display: block;
max-width: 1450px;
}
.card {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
</style>
<!-- local DOM goes here -->
<div class="container flex layout horizontal wrap">
<template is="dom-repeat" items="{{list}}">
<div class="card">
<paper-card heading="{{item.first}}" image="../image/{{item.last}}.jpg">
<div class="card-actions">
<paper-button>Explore!</paper-button>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat"></paper-icon-button>
</div>
</paper-card>
</div>
</template>
</div>
</template>
<script>
Polymer({
is: 'card-view',
ready: function() {
this.list = [
{first: 'Bob', last: 'i'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'}
];
}
});
</script>
</dom-module>
Index.html(主页)
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/card-view.html" />
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html" />
</head>
<body>
<style>
a,.anchor-like,
.markdown-html a{
color: var(--default-primary-color);
text-decoration:none;
}
body {
background-color: #FF5722;
}
</style>
<paper-toolbar>
<span class="title">Title</span>
</paper-toolbar>
<card-view></card-view>
</body>
</html>
好的,所以你想让卡片位于中间,并在卡片离开屏幕之前让行的长度变小。
你需要媒体查询和一些数学:-)
每张卡片的宽度为 300 像素 + 5 像素的边距(每边),这意味着每张卡片在屏幕上占据 space 的 310 像素。
假设我们永远不想连续显示超过 4 张卡片,这意味着我们永远不想 'card-view' 具有 4x310 像素(1240 像素)的更大尺寸
当 space 小于 1240px 时,我们想更改为 3x310px 等等。
card-view {
display: block;
margin: 0 auto;
}
@media screen and (min-width: 1240px) {
card-view {
width: 1240px;
}
}
@media screen and (min-width: 930px) and (max-width: 1239px) {
card-view {
width: 930px;
}
}
@media screen and (min-width: 620px) and (max-width: 929px) {
card-view {
width: 620px;
}
}
@media screen and (min-width: 310px) and (max-width: 619px) {
card-view {
width: 310px;
}
}
这里有一个link的概念https://jsfiddle.net/link2twenty/bzr9wt00/