请定义CSS类，满足要求：有四个div块，1>电脑屏幕上单排显示,总宽度不超过800，2>手机屏幕分两排显示，横向占满手机屏幕

Question

1.请定义CSS类，满足要求：有四个div块，1>电脑屏幕上单排显示,总宽度不超过800，2>手机屏幕分两排显示，横向占满手机屏幕

<div class=”tipsa”>

<div>A</div><div>B</div><div>C</div><div>D</div>

</div>

Answer 1

:root {
    --flex-basic: 1;
    --flex-wrap: nowrap;
}
.tipsa {
    max-width: 800px;
    display: flex;
    flex-wrap: var(--flex-wrap);
}
.tipsa div {
    flex: var(--flex-basic);
}

/* 通过js等手段检测是否是手机浏览器，显示下段代码 */
.tipsa {
    max-width: 100vw;
    width: 100vw;
    display: flex;
    flex-wrap: var(--flex-wrap,wrap);
}
.tipsa div {
    flex: 50%;
}