問題タブ [normalize-css]

amp-story は Normalize.css と Basscss で完全に機能しますか? AMP Start は、次の 2 つの既存のオープンソース プロジェクトの上に構築されているためです。

https://www.ampstart.com/howitworks

正規化.css

Normalize.css を使用すると、ブラウザーはすべての要素をより一貫して最新の標準に沿ってレンダリングできます。正規化が必要なスタイルのみを正確にターゲットにします。これにより、デバイス全体で AMP Start の明確で一貫したスタイルを定義する白紙の状態が提供されます。

Basscss

AMP の開始は、低レベルの CSS ツールキットである Basscss を使用して構築されています。Basscss は非常に軽量なツールキットであり、多くの CSS ユーティリティ クラスを提供し、カスタム CSS を作成することなく、レイアウト、レスポンシブ グリッドなどを実行するのに役立ちます。

Basscss はすぐに使えるスリムで応答性が高く、これは AMP Start にとって重要でした。Basscss をベース (アドオンなし) として使用しましたが、「!important」は AMP と互換性がないため、CSS ルールから「!important」のインスタンスを削除しました。既存の Basscss クラスを使用することで、AMP の 50Kb CSS 制限があっても、記述する CSS を大幅に減らしながら見栄えの良いページを作成することができました。

これら 2 つのプロジェクトによって提供される基盤の上に、CSS に一連の独自のスタイルを追加して、コンポーネントとテンプレートが AMP Start の一貫した外観を継承するようにしました。

全体として、CSS は AMP の 50kB クォータの半分以下しか占有しないため、Basscss および AMP Start クラスを使用してページをカスタマイズする余地が十分にあるはずです。

SCSSファイルを作成しました。次に、Normalize.css のすべての CSS スタイルをコピーして貼り付けます。次に、そのファイルを style.SCSS にインポートしました。その後、私のウェブページには水平スクロールバーと右側の空白が表示されます。コードのどの部分がこれに関与しているのかわかりません。インポートしたすべての Normalize.css コードを提供します。要旨リンク