/** * 统一桌面端展示 (宽度 >= 1366px) * 合并了原 1440px 和 1920px 的通用样式,并应用了你指定的 mod_third 布局 */ @media only screen and (min-width: 1366px) { /* --- 你提供的统一布局样式 --- */ body.mod_third .main_wrap, body.mod_third .go_top_box { max-width: 1400px; } /* 导航和侧边栏宽度分配 */ body.mod_third .left_nav { width: 21%; } body.mod_third .main_sidebar { width: 21%; } body.mod_third .page_main { width: 58%; /* 主内容区 */ } /* 底部导航栏和背景音乐盒定位 */ body.mod_third .footer_nav { max-width: 1108px; } body.mod_third .bgm_box { margin-left: -75px; } /* --- 桌面端通用的基础样式合并 (源自原1440/1920) --- */ .footer_top, .footer_text { font-size: 12px; } .land_content { max-width: 1080px; height: 607px; } .land_right { padding: 40px; padding-top: 60px; } .land_logo { margin-bottom: 30px; } .land_right .title { font-size: 32px; } .land_right .land_des { font-size: 14px; } .land_right .footer { padding: 0 40px; } } /** * 笔记本/小屏显示器 (<= 1366px) * 保持原样 */ @media only screen and (max-width: 1366px) { .land_content { max-width: 860px; height: 500px; } .land_right { padding: 30px; padding-top: 30px; } .land_logo { margin-bottom: 15px; } .land_right .title { font-size: 22px; } .land_right .land_des { font-size: 14px; } .land_right .footer { padding: 0 40px; } .land_nav a span, .land_nav a i { font-size: 14px; } body.mod_third .main_wrap, body.mod_third .go_top_box, body.mod_third .footer_nav { max-width: 860px; } body.mod_third .main_sidebar { display: none; } body.mod_third #top_third { display: flex; } body.mod_third .left_nav { width: calc(100% * 1 / 3.001); } body.mod_third .page_main { width: calc(100% * 2 / 3.001); } body.mod_third .top_bar { border-top-right-radius: 12px; } } /** * 平板端及以下 (<= 1200px) * 保持原样 */ @media only screen and (max-width: 1200px) { .land_page { align-items: flex-start; } .land_content { display: flex; flex-direction: column; margin: 0; height: max-content; border-radius: 0; position: relative; align-items: center; max-width: 100%; } .land_left { min-height: calc(100vh); width: 100%; } .land_right { width: 94%; position: absolute; background: rgb(243 245 255 / 78%); border-radius: 18px; top: 5%; backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); padding: 30px 30px 50px; border: 1px solid #fff; } .land_logo { margin-bottom: 30px; } .land_logo img { height: 42px; object-fit: cover; border-radius: 8px; } .land_right .title { font-size: 32px; } .land_right .footer { position: relative; bottom: auto; margin-top: 40px; padding: 0; } .land_nav { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .land_nav a { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 8px; border-radius: 12px; background: #1d1d1d; margin-bottom: 8px; width: 22%; } .land_nav a i { margin: 0; } .land_right .beian, .land_right .copyright { color: #293563; } } /** * 小屏平板 (<= 960px) * 保持原样 */ @media only screen and (max-width:960px) { .main_wrap, .top_bar, .footer_nav { max-width: 720px; } .main_wrap { margin-top: 0; } .lbc .page_main, .lbc .footer_nav_box .right { width: 100%; } .top_logo { margin-left: 20px; } .land_nav a { display: flex; flex-direction: column; align-items: center; } footer#colophon { display: none; } body.mod_third .main_wrap, body.mod_third .go_top_box, body.mod_third .footer_nav { max-width: 720px; } body.mod_third .page_main { width: 100%; } body.mod_third_s .sidebar_right { display: none; } body.mod_third_s #top_third { display: block; } body.mod_third_s .page_main { width: 100%; } .top_menu_box { border-radius: 8px; } } /** * 手机端 (<= 540px) * 保持原样 */ @media only screen and (max-width:540px) { body.mod_third_s #top_third, body.mod_third #top_third { display: flex; } .top_right { margin-right: 15px; justify-content: flex-end; width: 100%; } .user_info .avatar { width: 54px; height: 54px; } .moment_cat_nav, .posts_cat_nav, .photos_cat_nav, .douban_cat_nav, .friends_cat_nav { padding: 15px; } #post_item, #photos_item { padding: 0 15px; } .p_item { padding: 20px 0; } .t_content p { margin-bottom: 8px; } .normal_card_content .feature { width: 100px; min-width: 100px; height: 120px; margin-right: 12px; } .normal_content .entry-content p, .normal_card_content .entry-content p { display: none; } .normal_card_content .entry-title { font-size: 16px; word-break: break-all; } .normal_card_content .card_right { width: 100%; } .entry-footer { padding: 5px 8px; margin-top: 10px; } .normal_content .entry-content .feature { margin-top: 8px; height: 140px; } .normal_cat { font-size: 12px; } .single_wrap { padding: 15px; padding-bottom: 100px; } .single_wrap .comments-area, .page_content .comments-area, .single_content .comments-area { padding: 15px; } .list_user_meta .avatar { width: 40px; height: 40px; min-width: 40px; } .blog_content { padding-left: 50px; } .comments-area ul.comment-list li .profile, .comments-area ul.comment-list li .profile a { width: 35px; height: 35px; } .img_show { width: calc(83px*3); } .t_media_item, a.up_img_btn { width: 80px; height: 80px; } .single_content, .page_content, .page_wrap { padding: 0 15px; padding-bottom: 100px; } .page_wrap { padding-top: 20px; } .user_info { bottom: 18%; } .blog_list_inner, .single_content, .page_content, .page_wrap, .normal_list_inner, .single_wrap { border-radius: 12px; position: relative; z-index: 199; top: -18px; } .top_left { margin-left: 8px; } .top_left .top_logo { display: block; margin-left: 0; } .top_bar, .dark .top_bar { height: 64px; width: 100% !important; border-radius: 0; background: transparent; } .top_logo img { height: 40px !important; } .footer_nav_box ul li a i { font-size: 18px; } .footer_nav_box .inner { min-height: 60px; } .footer_nav_box ul li a { padding: 0 15px; } .t_login { display: none; } a.go_top { display: none; } a.mobile_edit { display: flex; } .index_banner { margin-top: -64px; height: 240px; } .top_bar.uk-sticky-fixed.uk-active, .dark .top_bar.uk-sticky-fixed.uk-active { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .top_bar.uk-sticky-fixed.uk-active.mobile_active { backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); background: rgb(235 242 237 / 80%); border-radius: 0; height: 50px; } .dark .top_bar.uk-sticky-fixed.uk-active.mobile_active { background: rgb(27 29 48 / 80%); } .top_tool i, .dark .top_tool i, .dark .mobile_active .top_tool i, .t_dark a i, .dark .t_dark a i { color: #fff; } .mobile_active .top_tool i { color: #000000; } .top_tool input.s_input:focus~[class*=ri-] { color: #4f4f4f; } .land_page { align-items: flex-start; } .land_content { display: flex; flex-direction: column; margin: 0; height: max-content; border-radius: 0; position: relative; align-items: center; } .land_left { min-height: calc(100vh); width: 100%; } .land_right { width: 94%; position: absolute; background: rgb(243 245 255 / 78%); border-radius: 18px; top: 5%; backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); padding: 30px 30px 50px; border: 1px solid #fff; } .land_logo { margin-bottom: 30px; } .land_logo img { height: 42px; object-fit: cover; border-radius: 8px; } .land_right .title { font-size: 32px; } .land_right .footer { position: relative; bottom: auto; margin-top: 40px; padding: 0; } .land_nav { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .land_nav a { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 8px; border-radius: 12px; background: #1d1d1d; margin-bottom: 8px; width: 22%; } .land_nav a i { margin: 0; } .land_right .beian, .land_right .copyright { color: #293563; } .sim .land_content { padding: 0 15px; } .sim .land_nav a { width: 22%; margin-bottom: 8px; } .sim .land_meta { left: 40px; } .darkl .land_right .title p { color: #323232; } .darkl .land_right .land_des { color: #222433; } .darkl .land_right .land_des a { color: #00935a; } .land_nav a span { font-size: 13px; } .archive_main .page-header { padding: 20px 15px; } .post_footer_meta span.sticky_icon { display: none; } .t_form { padding: 0 15px; padding-top: 20px; } .topic_tool { padding: 0px 15px 40px; } .uk-modal { padding: 5px; } .t_search.top_tool.icon_color { display: block; } .top_s_box { display: none; } a.bg_music, .dark a.bg_music { background: transparent; width: auto; height: auto; margin-left: 10px; } a.bg_music i { color: #fff; } a.m_prev, a.m_next, .timer, a.m_volume, .player_hand { display: none; } .player_mod .tool { display: block; width: 100%; margin: 4px 0; position: relative; z-index: 5; } .player_mod .top { position: relative; z-index: 1; } .player_mod .player_bar { height: 20px; background: transparent; overflow: visible; touch-action: none; } .player_mod .player_bar::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 6px; background: #ddd; border-radius: 6px; transform: translateY(-50%); z-index: 1; } .dark .player_mod .player_bar::before { background: #585858; } .player_mod .player_bar .progress { height: 6px; top: 50%; z-index: 2; transform: translateY(-50%); } .player_mod .player_dot { display: block; width: 13px; height: 13px; margin-right: -9px; z-index: 9; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } .player_mod .m_cover { width: 32px; height: 32px; min-width: 32px; } .player_mod .m_cover img { border-radius: 50%; } a.m_play { line-height: 1; } .bgm_box { padding: 6px 10px; background: rgba(235, 242, 237, 0); } .footer_nav_box .footer_player { min-height: auto; } .player_mod .pl_btn { margin-right: 0; } .footer_nav_box { top: 56px; z-index: -1; } .footer_menu { display: block; } .player_mod .m_info small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 90px; } .single_music_header .mu_img { width: 120px; height: 120px; min-width: 120px; } .footer_main { position: relative; padding-bottom: 110px; } .mobile_logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; } .admin_ava a.mobile_edit { display: none; } body.mod_third_s .nav_title { display: flex; opacity: 1; } body.mod_third_s .footer_nav_box .right { width: 100%; } /* 手机端文章目录调整 */ .listree-box { left: 40px; right: 12px; max-width: 85vw; max-height: calc(100vh - 96px); margin-left: 0; border-radius: 12px; transform: translate3d(0, -8px, 0) scale(.98); transform-origin: top center; } .listree-box.is-open { transform: translate3d(0, 0, 0) scale(1); } #listree-ol { max-height: min(56vh, 420px); margin: 0; padding: 10px 8px 12px; } #listree-ol li { line-height: inherit; margin: 2px 0; list-style: none; } #listree-ol li a { font-size: 0.82rem; padding: 7px 9px 7px 10px; } .toc_nav .listree-btn.is-active i { transform: rotate(90deg); } /* 手机端底部音乐按钮颜色 */ .footer_menu a.playing-music, .footer_menu a.playing-music i, .footer_menu a.playing-music .title { color: #4CAF50; } /* 手机端顶部工具按钮 */ .top_tool a { padding: 6px; display: flex; } }