Template:Example3/styles.css

/** 电脑端样式
	采用左pre右渲染效果模式，左侧代码宽度为50%-60% **/
.example3-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.example3-col-src {
    flex: 1 1 45%;
    min-width: 50%;
    max-width: 60%;
    vertical-align: top;
}
.example3-col-render {
    flex: 1 1 0%;
    min-width: 250px;
    vertical-align: top;
}

/** 移动端样式
	采用上pre下渲染效果模式，上下宽度统一为100% **/
@media (max-width: 768px) {
    .example3-col-src,
    .example3-col-render {
        width: 100%;
        flex-basis: 100%;
        min-width: 100%;
    }
}
/* [[Category:在模板名字空间下的CSS页面]] */