SEO を維持しながら Flexbox 要素をレスポンシブに並べ替える方法

レスポンシブ DOM レイアウトのフレックスボックスの順序のカスタマイズ

質問:

検索を維持しながらフレックスボックスを使用して div を並べ替えるにはどうすればよいですか要素を繰り返すことなくエンジンを最適化した構造はありますか?

答え:

CSS だけではこのタスクを完全に達成することはできませんが、ハイブリッド アプローチが利用できます。

静的高さのフレックスボックス:

フレックスボックスと固定高さを利用して div を並べ替えることができます:

<code class="css">.flex {
  height: 90vh;
  display: flex;
  flex-flow: column wrap;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

これにより、要素が垂直に積み重ねられ、2 番目の div が一番下に配置されます。

応答動作のためのメディア クエリ:

メディア クエリを使用して、さまざまな画面サイズを処理します:

<code class="css">@media (max-width:768px) {
  .flex div:nth-child(2) {
    order: 0;
  }
}</code>

小さい画面では、2 番目の div は

スタイリング:

<code class="css">.flex-child {
  font-size: 2em;
  font-weight: bold;
}
.flex-child:nth-child(1) {
  background: #e6007e;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
}</code>

デモ:

動作については、この CodePen を参照してください。例: コードペンデモ

以上がSEO を維持しながら Flexbox 要素をレスポンシブに並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。