xhtml+css

CSS媒体查询 @media

字号+ 来源:网络收集 编辑整理: 飞燕前端网 2018-10-18 11:24:19

PC端和移动端自适应,自动换行@mediascreenand(max-width:850px){/*以下代码在屏幕小于850的情况下执行*/.dsad{/*父类*/display:flex;/*flex布局*/flex-wrap:wrap;/*是否...

PC端和移动端自适应,自动换行

@media screen and (max-width: 850px) {      /*以下代码在屏幕小于850的情况下执行*/
    .dsad{     /*父类*/
        display: flex;          /*flex布局*/
        flex-wrap: wrap;        /*是否支持子类换行*/
    }
    .asdf{      /*子类*/
        width: 100%;
        order:1;             /*子类布局的先后顺序,数字越小,子类就在最前面*/
        flex-grow: 1;        /*1表示独占一行,后面的都换行*/
    }
    .das{
        width: 100%;
        order:0;
        flex-grow: 4;
    }
}

1.飞燕前端网遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.飞燕前端网的原创文章,请转载时务必注明文章作者和"来源:飞燕前端网",不尊重原创的行为飞燕前端网或将追究责任。

相关文章
网友点评