1. 程式人生 > >CSS媒體查詢 @media

CSS媒體查詢 @media

  PC端和移動端自適應,自動換行

  

 1 @media screen and (max-width: 850px) {      /*以下程式碼在螢幕小於850的情況下執行*/
 2             .dsad{     /*父類*/
 3                 display: flex;          /*flex佈局*/
 4                 flex-wrap: wrap;        /*是否支援子類換行*/
 5             }
 6             .asdf{      /*子類*/
 7                 width
: 100%; 8 order:1; /*子類佈局的先後順序,數字越小,子類就在最前面*/ 9 flex-grow: 1; /*1表示獨佔一行,後面的都換行*/ 10 } 11 .das{ 12 width: 100%; 13 order:0; 14 flex-grow: 4; 15 } 16 }