Description

/* ====== 基础设置 ====== */ .responsive-container { padding: 0 15px; box-sizing: border-box; font-family: Roboto, HelveticaNeue, “Helvetica Neue”, sans-serif; } .responsive-container *, .responsive-container *::before, .responsive-container *::after { box-sizing: border-box; } .responsive-container img { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; } .responsive-container h1, .responsive-container h2, .responsive-container h3, .responsive-container h4, .responsive-container h5, .responsive-container h6, .responsive-container p { margin-top: 0; margin-bottom: 1em; line-height: 1.5; } .responsive-container h1 { font-size: 2.2em; } .responsive-container h2 { font-size: 1.8em; } .responsive-container h3 { font-size: 1.4em; } /* ====== 布局容器 (行) ====== */ .responsive-container .grid-uniform { display: flex; flex-wrap: wrap; width: 100% !important; margin: 0 -15px; padding: 40px 0 !important; align-items: center; } .responsive-container .be-gray { background-color: #ebebeb; } /* ====== 布局项目 (列) ====== */ .responsive-container .grid__item { width: 50%; padding: 0 15px !important; } .responsive-container .one-whole { width: 100%; padding: 0 15px !important; text-align: center; } /* ====== 文本样式 ====== */ .responsive-container .desc_text { padding: 10px; } .responsive-container .text-center { text-align: center; } .responsive-container .text-left { text-align: left; } /* 特定颜色 */ .responsive-container .text-brand-blue { color: rgb(35, 111, 161); } .responsive-container .text-brand-orange { color: rgb(255, 158, 24); } /* 反向排列 */ .responsive-container .row-reverse { flex-direction: row-reverse; } /* ====== 移动端适配 (关键部分) ====== */ @media (max-width: 768px) { .responsive-container { padding: 0 10px; } .responsive-container .grid-uniform, .responsive-container .row-reverse { flex-direction: column !important; margin: 0; padding: 20px 0 !important; } .responsive-container .grid__item { width: 100% !important; padding: 15px 0 !important; } .responsive-container .text-center, .responsive-container .text-left, .responsive-container .desc_text { text-align: center; } .responsive-container h1 { font-size: 1.8em; } .responsive-container h2 { font-size: 1.5em; } .responsive-container h3, .responsive-container h4, .responsive-container h5 { font-size: 1.1em; } }