/** 电脑端样式
采用左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%;
}
}