问题描述
我有2个输入，我想让字体大小在小屏幕上显得很小，在普通屏幕上很大，但是当我使用自定义CSS（即--paper-input-container-label）@media似乎不能正常工作，在小屏幕上测试下面的代码（高度 / strong>
< paper-input-container>
< label>电子邮件< / label>
< input is =iron-input>
< / paper-input-container>
< paper-input-container>
< label>密码< / label>
< input is =iron-inputtype =password>
< / paper-input-container>
CSS
@media唯一屏幕（max-height：320px）{
paper-input-container {
--paper-input-container-label：{
font-size：12px;
}
--paper-input-container-input：{
font-size：12px;
$ b @media仅屏幕（最小高度：480px）{
纸输入容器{
- -paper-input-container-label：{
font-size：16px;
}
--paper-input-container-input：{
font-size：16px;
您需要在< template is =dom-bind>内使用或者在< iron-media-query> >> < dom-module> 里面，因为它能够设置一个变量（ isBetween500_700px
< body class =fullbleed>
< template is =dom-bind>
< iron-media-query query =（min-width：500px）query-matches ={{isBetween500_700px}}>< / iron-media-query>
< template is =dom-ifif ={{isBetween500_700px}}>
< h1> Hello< / h1>
< p>我在500x700以内< / p>
< / template>
< template is =dom-ifif ={{！isBetween500_700px}}>
< p>我在其他< / p>
< / template>
< / template>
< / body>
更多详情，请参阅 / demo 目录，其中包含一个很好的示例
I have 2 inputs and I want to make font-size appear small on small screens and big on normal screens but when I use custom css(ie --paper-input-container-label) @media seems not to work properly, testing code below on small screens (height < 320) use css inside of min-height: 480px @media instead max-height: 320px
HTML
<paper-input-container>
<label>E-mail</label>
<input is="iron-input">
</paper-input-container>
<paper-input-container>
<label>Password</label>
<input is="iron-input" type="password">
</paper-input-container>
CSS
@media only screen (max-height: 320px) {
paper-input-container {
--paper-input-container-label: {
font-size: 12px;
}
--paper-input-container-input: {
font-size: 12px;
}
}
}
@media only screen(min-height: 480px) {
paper-input-container {
--paper-input-container-label: {
font-size: 16px;
}
--paper-input-container-input: {
font-size: 16px;
}
}
}
You need to use the <iron-media-query> inside an <template is="dom-bind"> or inside a <dom-module> for it to be able to set a variable (isBetween500_700px)
<body class="fullbleed">
<template is="dom-bind">
<iron-media-query query="(min-width:500px)" query-matches="{{isBetween500_700px}}"></iron-media-query>
<template is="dom-if" if="{{isBetween500_700px}}">
<!-- anything in here is displayed only when the display port is between 500 and 700 pixels-->
<h1>Hello</h1>
<p>I am inside 500x700 </p>
</template>
<template is="dom-if" if="{{!isBetween500_700px}}">
<p>I am inside other</p>
</template>
</template>
</body>
For more details see also the source code of <iron-media-query> in the /demo directory which contains a nice example https://github.com/PolymerElements/iron-media-query/blob/master/demo/index.html
这篇关于@media无法正确使用聚合物定制css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！