/*
* mobile.css - 厦门大学高级计量经济学课程网站移动端适配补丁
* 适配范围: 320px - 768px (手机/平板竖屏)
* 使用方式: 在 HTML 中添加:
*
*
*/
/* ========== 基础重置 ========== */
@media screen and (max-width: 768px) {
* {
box-sizing: border-box;
}
body {
font-size: 14px;
min-width: auto;
overflow-x: hidden;
}
/* ========== viewport 修复 ========== */
/* 必须先添加 */
/* ========== 顶部导航 ========== */
.topWrap {
border-top: 3px solid #0d6db9;
}
.topDiv {
width: 100% !important;
padding: 0 10px;
}
.topR {
width: 100% !important;
padding: 10px 0;
text-align: center;
float: none;
}
.topR_t {
float: none !important;
text-align: center;
}
/* ========== 导航栏 ========== */
.navWrap {
height: auto;
}
.nav {
width: 100% !important;
height: auto;
}
.nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.nav li {
float: none;
height: 40px;
line-height: 40px;
}
.nav li a {
padding: 0 15px;
font-size: 14px;
}
/* ========== Banner ========== */
.vsb-box {
width: 100%;
}
.vsb-container {
width: 100% !important;
}
.bannerWrap {
width: 100%;
}
.bannerWrap img,
.vsb-box img {
width: 100% !important;
height: auto !important;
}
/* ========== 主容器 ========== */
.container {
width: 100% !important;
padding: 0 10px;
}
.content {
width: 100% !important;
}
/* ========== 新闻信息区 - 改为单列 ========== */
.new_inforBox {
width: 100% !important;
padding: 0;
float: none;
}
.new_inforBox2 {
width: 100% !important;
}
.newBox {
width: 100%;
}
/* 课程材料/补充阅读等模块 */
.new_pic,
.new_pic1,
.new_pic2 {
width: 100% !important;
float: none;
padding: 0;
}
.new_pic img,
.new_pic1 img,
.new_pic2 img {
width: 100% !important;
height: auto;
}
/* 幻灯片适配 */
.slideBox1 {
width: 100% !important;
}
.slideBox1 .bd img {
width: 100% !important;
height: auto;
}
/* ========== 课程团队 ========== */
.new_list.teacher {
width: 100% !important;
float: none;
padding: 0;
}
.new_list.teacher ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.new_list.teacher li {
width: 48%;
margin-bottom: 15px;
}
.new_list.teacher .img img {
width: 100% !important;
height: auto;
}
/* ========== 课程教材 ========== */
.new_list.book {
width: 100% !important;
float: none;
padding: 0;
}
.new_list.book .img {
width: 100%;
text-align: center;
}
.new_list.book .img img {
width: 100% !important;
height: auto;
}
/* ========== 信息列表 ========== */
.infor_list {
width: 100%;
}
.dynamic_list {
width: 100%;
}
.dynamic_list li {
width: 100%;
height: auto;
line-height: 1.6;
padding: 8px 0;
background-position: 0 12px;
}
.dynamic_list li a {
white-space: normal;
overflow: visible;
text-overflow: clip;
display: block;
}
.dynamic_list li a em {
width: 100% !important;
float: none;
white-space: normal;
}
/* ========== 右侧信息栏 ========== */
.informBox,
.informBox4 {
width: 100% !important;
float: none;
padding: 0;
margin-top: 20px;
}
/* ========== 课程视频树形菜单 ========== */
.lecture {
width: 100%;
}
.lecture img {
width: 100% !important;
height: auto;
}
#browser {
width: 100%;
}
#browser li {
width: 100%;
}
#browser .folder,
#browser .file a {
font-size: 13px;
}
/* ========== 底部 ========== */
.footWrap {
margin-top: 20px;
}
.footDiv_one {
height: auto;
padding: 15px 0;
line-height: 1.8;
}
.foot_one {
width: 100% !important;
padding: 0 10px;
}
.foot_one p {
width: 100% !important;
}
/* ========== 标题样式调整 ========== */
.dynamic h2 {
font-size: 16px;
padding-bottom: 5px;
}
/* ========== 链接列表优化 ========== */
.infor_list ul li {
border-bottom: 1px dashed #eee;
padding: 10px 0;
}
.infor_list ul li:last-child {
border-bottom: none;
}
/* ========== 图片自适应 ========== */
img {
max-width: 100%;
height: auto;
}
/* ========== 清除浮动 ========== */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* ========== 隐藏一些桌面端元素 ========== */
.Search {
display: none;
}
}
/* ========== 小屏手机额外优化 (<= 480px) ========== */
@media screen and (max-width: 480px) {
body {
font-size: 13px;
}
.nav li {
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav li:last-child {
border-bottom: none;
}
.nav li a {
display: block;
padding: 10px;
}
.new_list.teacher li {
width: 100%;
}
.dynamic h2 {
font-size: 15px;
}
.dynamic_list li {
font-size: 13px;
}
/* 视频列表简化 */
#browser ul {
padding-left: 15px;
}
#browser .file a {
font-size: 12px;
}
}
/* ========== 平板横屏优化 (768px - 1024px) ========== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.topDiv,
.nav,
.container {
width: 100% !important;
padding: 0 15px;
}
.new_inforBox {
width: 65% !important;
}
.informBox {
width: 30% !important;
}
}