応答性の実装：フレックスレイアウト+メディアクエリ@media

注意：

1.この場合、私はプロジェクトにVUEの修正を書いたので、アイデアは、フレームワーク・プログラムをVUEにも同様に適用可能です。
2.それは、結果を見て、直接コピーされ、最初のコードをお勧めします。

3.知識を必要とする、メディアクエリを使用してフレックスレイアウト属性構文@media

フレックスラップをULする4セット：ラップ、李ラップを許可してください、私はピットにいた、数分間置きます。
5.私が書く、だけでなく、多くの時間を費やし、人々はより多くの患者であることを学びました。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタのcharset = "UTF-8" > 
    < タイトル>実装応答：フレックスレイアウト+メディアクエリー</ タイトル> 
    < スタイルタイプ=「テキスト/ CSS " > 
        .site_introduce { 
          幅：1200px ; 
          マージン：0自動; 
          マージントップ：70ピクセル; 
          高さ：250ピクセル;
          国境：1pxの固体＃00FF00 ; 
        } 
        のLi { 
          リストスタイル：なし。
        } 
        .product_introduction { 
          幅：1200px 。
          マージン：0自動; 
        } 
        .product_introduction UL { 
          ディスプレイ：曲がります。
          フレックス方向：行。
          -コンテンツが正当化：スペースの間; 
          ALIGN-アイテム：センター;
           フレックスラップ：ラップ; 
        } 
        .product_introductionのUL李{ 
          幅：272px ; 
          高さ：250ピクセル; 
          パディング：20ピクセル0 ; 
          国境：1pxの固体＃00FF00 ; 

          表示：フレックス。
          ALIGN-アイテム：センター; 
          正当化-コンテンツ：センター; 
        } 
        .product_introductionのアップリンクのLi：ホバー{ 
          背景色：＃F2F2F2 ; 
        } 
        .product_introduction UL LI> DIV> P { 
          左テキストALIGN = ：センター; 
        } 
        / * 設定ピクチャースタイル* / 
        .introduce_pic { 
          幅：100ピクセル、
          高さ：100pxに、
          マージン：0自動; 
          ボーダーRADIUS ：50％; 
          地色：＃F1F3F4 ; 
          テキスト整列は=左：センター; 
        }
        .introduce_pic IMG { 
          幅：70ピクセル。
          パディングトップ：18px ; 
          背景リピート：なしリピート; 
        } 
        @media画面と（最大幅：1200px）{ 
          .product_introduction { 
            幅：928px ; 
            マージン：100pxに自動; 
          } 
        } 
        @media画面と（最大幅：928px）{ 
          .product_introduction { 
            幅：646px ;
            マージン：100pxに自動; 
          } 
        } 
        @media画面と（最大幅：646px）{ 
          .product_introduction { 
              幅：364px ; 
              マージン：100pxに自動; 
          }        
    </ スタイル> 
</ ヘッド> 
< 身体> 
     < divのクラス= "product_introduction" > 
      < UL > 
        < 李> 
          < divの>        
            < divのクラス= "introduce_pic" > 
              < IMG   SRC = "dog.jpg" ALT = "英雄"  /> 
            </ divの>          
            < P >随便的文本1 </ P > 
          </ DIV >  
        </ 李> 
        < 李> 
          < DIV >        
            < divのクラス= "introduce_pic" > 
              < IMG   SRC = "dog.jpg" ALT = "英雄"  /> 
            </ divの>          
            <P >カジュアルテキスト2 </ P >
          </ DIV >  
        </ 李> 
        < 李> 
          < divの>        
            < divのクラス= "introduce_pic" > 
              < IMG   SRC = "dog.jpg" ALT = "英雄"  /> 
            </ divの>          
            < P >随便的文本3 < / P > 
          </ DIV >  
        </ 李> 
        < 李> 
          < divの>        
            < divのクラス= "introduce_pic"> 
              < IMGの   SRC= "dog.jpg" ALT = "ヒーロー"  /> 
            </ DIV >          
            < P >随便的文本4 </ P > 
          </ DIV >  
        </ 李> 
      </ UL > 
    </ DIV > 
</ ボディ> 
</ HTML >