AMP：如何在不使用style =「width」的情況下在CSS中進行調查？

-2

我有一個CSS調查的進度條，裏面有HTML標籤，我有一個style="width"，所以我不需要像所有的值都有.width-99 { width: 99%;}這樣的類。AMP：如何在不使用style =「width」的情況下在CSS中進行調查？

現在，我必須製作一個放大版本，並且我想知道是否有另一種方法可以在沒有.width-99 { width: 99%;}的情況下執行進度條。即使因爲我的代碼應該儘可能精益。

我的其他選擇是在AMP版本中禁用它，但它也不是很理想。

我的代碼：

.survey { 
 
\t font-size: 1.9rem; 
 
} 
 

 
.survey-bar { 
 
\t display: inline-block; 
 

 
\t width: 91%; 
 
\t height: 3.8rem; 
 

 
\t border-radius: 4px; 
 

 
\t background: #EBEBEB; 
 
} 
 

 
.results { 
 
\t display: flex; 
 

 
\t margin-top: .5rem; 
 

 
\t align-items: center; 
 
\t justify-content: space-between; 
 
} 
 

 

 
.results span { 
 
\t display: inline-block; 
 

 
\t height: 3.8rem; 
 

 
\t border-radius: 4px; 
 

 
\t background: #777; 
 
} 
 

 
.results span.winner { 
 
\t display: flex; 
 

 
\t align-items: center; 
 
\t justify-content: flex-end; 
 
} 
 

 
/* 'tick' icon */ 
 
.results span.winner:before { 
 
\t padding-right: .5rem; 
 

 
\t font-family: 'icomoon'; 
 
\t font-size: 2.7rem; 
 
\t color: #FFF; 
 

 
\t content: '\e90e'; 
 
}

<div class="results"> 
 
    15% 
 
    <div class="survey-bar"> 
 
     <span style="width: 15%"></span> 
 
    </div> 
 
</div> 
 
<p>It was popularised in the 1960s</p> 
 
<div class="results"> 
 
    80% 
 
    <div class="survey-bar"> 
 
     <span style="width: 80%" class="winner"></span> 
 
    </div> 
 
</div> 
 
<p>Letraset sheets containing Lorem Ipsum passages</p> 
 
<div class="results"> 
 
    5% 
 
    <div class="survey-bar"> 
 
     <span style="width: 5%"></span> 
 
    </div> 
 
</div>

編輯： AMP意味着加速移動頁。

一些規則：

我必須把頁面內聯的所有CSS
我只能在所有的頁面中使用一個CSS內嵌

網站沒有AMP：LINK

AMP版本：LINK

來源

2016-11-15 Bianca

爲什麼你不能使用內聯的CSS？如果您可以更新類名，則可以更新內聯樣式值。 –

爲什麼你想避免'style =「width：...」'？另外，「amp版」是什麼意思？ – SeinopSys

@SeinopSys或AMP-HTML ..？ –

I在Github上找到this open issue，真的被禁止每頁使用多個內聯CSS。

所以，就我而言，我將刪除所有樣式，只保留文本。

來源

2016-11-16 17:07:32 Bianca

AMP：如何在不使用style =「width」的情況下在CSS中進行調查？

回答

相關問題