gpt4 book ai didi

html - @media 不能与 polymer 自定义 css 一起正常工作

转载 作者:行者123 更新时间:2023-11-27 23:28:43 26 4
gpt4 key购买 nike

我有 2 个输入,我想让字体大小在小屏幕上显示小而在普通屏幕上显示大但是当我使用自定义 css(即 --paper-input-container-label)@media 似乎无法正常工作,在小屏幕(高度 < 320)上测试下面的代码在 min-height: 480px @media 而不是 max-height: 320px 中使用 css

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;
}
}
}

最佳答案

您需要使用 <iron-media-query><template is="dom-bind"> 里面或在 <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-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>

Plunker example

有关更多详细信息,另请参阅 <iron-media-query> 的源代码在/demo包含一个很好示例的目录 https://github.com/PolymerElements/iron-media-query/blob/master/demo/index.html

关于html - @media 不能与 polymer 自定义 css 一起正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37045958/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com