Question

我正在尝试为我的网站构建一个amp页面。

我正在尝试通过大量范围输入来实现响应形式。

因此，当屏幕尺寸更改时，它们可以很好地堆叠，就像使用引导程序时一样。

我的代码是（作为一个示例）；

    <div class="form-field" layout="container">
        <div class="form-title" layout="responsive">
            <span>How much do you need?</span>
            <span [text]="[amount]">
                £1500000
            </span>
        </div>
        <div layout="responsive" width="auto" height=100>
            <input type="range"
                   name="amountSlider"
                   min="10000"
                   step="10000"
                   value="1500000"
                   max="3000000"
                   on="change:AMP.setState({amount: '£' + event.value})">
        </div>
    </div>

现在，当我将layout属性添加到div中时。里面的所有元素都消失了。当我检查HTML时，似乎正在应用CSS；

.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
    position: relative;
    overflow: hidden!important;
    color: transparent!important;
}

现在从阅读文档中可以看出我符合amp规范，但是我在这里一定做错了吗？

有人能指出我做错了什么，以及如何实现以上布局的正确方向吗？

Answer 1

@ Matthew-Flynn

由于color: transparent!important;，文本消失了。我在下面的代码片段中删除了该代码。但是我不确定是否能回答您的定位问题：您能否再构建一个摘要，让我来看一下？

.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
    position: relative;
    overflow: hidden!important;
}

<div class="form-field" layout="container">
        <div class="form-title" layout="responsive">
            <span>How much do you need?</span>
            <span [text]="[amount]">
                £1500000
            </span>
        </div>
        <div layout="responsive" width="auto" height=100>
            <input type="range"
                   name="amountSlider"
                   min="10000"
                   step="10000"
                   value="1500000"
                   max="3000000"
                   on="change:AMP.setState({amount: '£' + event.value})">
        </div>
    </div>

使用带有表单的layout属性的amp-layout

1 个答案: