CSS媒體查詢 @media
阿新 • • 發佈:2018-11-11
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 }