@charset "UTF-8"; /* ===== 关键修复：添加移动端适配基础 ===== */ /* 在HTML的中添加： */ /* ===== 变量定义 ===== */ :root { --primary-color: #424242; --hover-color: #555555; --dark-color: #1f1f1f; --light-color: #f7f7f7; --white: #ffffff; --gray-light: #f3f3f3; --gray-medium: #bbbbbb; --gray-dark: #666666; --accent-color: #e42b2b; --accent-hover: #8e0000; --shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); --border-radius: 6px; --transition: all 0.15s linear; --font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 移动端字体大小变量 */ --mobile-font-xs: 0.85rem; --mobile-font-sm: 0.95rem; --mobile-font-base: 1rem; --mobile-font-md: 1.1rem; --mobile-font-lg: 1.25rem; --mobile-font-xl: 1.4rem; --mobile-font-2xl: 1.6rem; --mobile-font-3xl: 1.8rem; /* 移动端间距变量 */ --mobile-space-xs: 8px; --mobile-space-sm: 12px; --mobile-space-md: 16px; --mobile-space-lg: 20px; --mobile-space-xl: 24px; --mobile-space-2xl: 32px; } /* ===== 关键修复：盒模型重置 ===== */ *, *::before, *::after { box-sizing: border-box; } /* ===== 基础样式 ===== */ html { background-color: var(--light-color); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; /* 防止字体自动调整 */ text-size-adjust: 100%; scrollbar-width: thin; } /* 确保body不会超出视口 */ body { color: #000; font-family: var(--font-family); font-size: 16px; width: 100%; max-width: 100%; background-color: var(--light-color); margin: 0; padding: 0; overflow-x: hidden; /* 防止横向滚动 */ } /* ===== 布局样式修复 ===== */ .main { background: var(--white); box-shadow: var(--shadow); width: 820px; max-width: 100%; /* 关键修复：确保不超过视口宽度 */ min-width: auto; /* 移除最小宽度限制 */ margin: 60px auto 0; position: relative; } .content, .list_with_title .container { width: 720px; max-width: 100%; /* 关键修复 */ margin: 0 auto; padding: 0 20px; /* 添加内边距防止内容贴边 */ } .content { height: auto; } /* ===== 导航栏样式修复 ===== */ .nav_container { width: 740px; max-width: 100%; /* 关键修复 */ height: 3rem; margin: 0 auto; padding: 20px; position: relative; z-index: 999; } /* ===== 响应式设计优化 ===== */ /* 大平板 (751px - 1000px) */ @media screen and (min-width: 751px) and (max-width: 1000px) { .main { width: 90%; max-width: 90%; margin: 40px auto 0; } .content, .list_with_title .container, .header, .nav_container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 20px; } .nav_container { padding: 20px; } } /* 小平板和大型手机 (576px - 750px) - 关键修复区域 */ @media screen and (max-width: 750px) { .main { width: 100%; max-width: 100%; margin: 0 auto; /* 移除顶部边距，让布局更紧凑 */ box-shadow: none; border-radius: 0; } .content, .list_with_title .container, .header, .nav_container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--mobile-space-lg); /* 使用相对单位 */ } .content .post_content { font-size: var(--mobile-font-base); line-height: 1.7; width: 100%; max-width: 100%; overflow-wrap: break-word; } /* 确保图片不会超出容器 */ .markdown img { max-width: 100%; height: auto; } /* 修复表格溢出 */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .header { padding: var(--mobile-space-2xl) 0 60px; text-align: center; } .header .site_title_container .site_title a { font-size: var(--mobile-font-2xl); text-align: center; display: block; width: 100%; float: none; } .post { margin: var(--mobile-space-lg) 0; padding: 0; width: 100%; } .post .post_title a { font-size: var(--mobile-font-xl); line-height: 1.3; word-wrap: break-word; } .post .post_detail_title h2 { font-size: var(--mobile-font-xl); line-height: 1.3; margin: 0 0 var(--mobile-space-lg) 0; padding: 0; word-wrap: break-word; } .nav_container { padding: var(--mobile-space-md) var(--mobile-space-lg); } /* 确保导航菜单适应屏幕 */ .nav_container .site_nav { width: 100%; left: 0; right: 0; } .nav_container .site_nav a { font-size: var(--mobile-font-base); padding: var(--mobile-space-md); display: block; text-align: center; } } /* 小型手机 (≤575px) */ @media screen and (max-width: 575px) { .main, .content, .list_with_title .container, .header, .nav_container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--mobile-space-md); } .content .post_content { font-size: var(--mobile-font-sm); } .header .site_title_container .site_title a { font-size: var(--mobile-font-xl); } .post .post_title a { font-size: var(--mobile-font-lg); } .post .post_detail_title h2 { font-size: var(--mobile-font-lg); padding: 0; } .nav_container .site_nav a { font-size: var(--mobile-font-base); padding: var(--mobile-space-sm) var(--mobile-space-md); } /* 确保代码块不会溢出 */ .markdown pre { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .markdown pre code { white-space: pre-wrap; word-wrap: break-word; } } /* 超小型手机 (≤375px) */ @media screen and (max-width: 375px) { .main, .content, .list_with_title .container, .header, .nav_container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--mobile-space-sm); } .content .post_content { font-size: var(--mobile-font-xs); } .header .site_title_container .site_title a { font-size: var(--mobile-font-lg); } .post .post_title a { font-size: var(--mobile-font-md); } .nav_container .site_nav a { font-size: var(--mobile-font-sm); padding: var(--mobile-space-xs) var(--mobile-space-sm); } } /* 横屏手机优化 */ @media screen and (max-width: 750px) and (orientation: landscape) { .header { padding: var(--mobile-space-md) 0 40px; } .nav_container .site_nav { max-height: 60vh; overflow-y: auto; } } /* 高DPI屏幕优化 */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .markdown img { image-rendering: -webkit-optimize-contrast; } } /* 其他样式保持不变... */ /* [这里包含您原有的所有其他样式，但已根据上述修复进行了调整] */ /* ===== 文字和链接样式 ===== */ p { line-height: 1.9em; font-weight: 400; margin: 0; } a { text-decoration: none; transition: var(--transition); } /* 其余样式保持不变... */ a:link, a:visited { color: var(--primary-color); } a:hover, a:active { color: var(--hover-color); } h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } hr { border: 1px solid var(--gray-light); } /* ===== 布局样式 ===== */ .main { background: var(--white); box-shadow: var(--shadow); width: 820px; max-width: 2000px; min-width: 375px; margin: 60px auto 0; } .content, .list_with_title .container { width: 720px; margin: 0 auto; } .content { height: auto; } /* ===== 导航栏样式 ===== */ .nav_container { width: 740px; height: 3rem; margin: 0 auto; padding: 20px 0; position: relative; z-index: 999; } .nav_container .menu_icon { padding: 10px; float: right; display: none; position: fixed; right: 0; z-index: 1000; background: var(--white); border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .nav_container .menu_icon a { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .nav_container .site_nav { float: right; } .nav_container .site_nav ul { list-style: none; margin: 0; padding: 0; float: right; } .nav_container .site_nav li { float: left; } .nav_container .site_nav a { display: block; white-space: nowrap; padding: 12px 16px; font-size: 0.95rem; position: relative; border-radius: var(--border-radius); transition: var(--transition); } .nav_container .site_nav a:hover { background-color: var(--gray-light); } /* ===== 头部样式 ===== */ .header { width: 720px; padding: 50px 0 120px; margin: 0 auto; background-size: cover; } .header .site_title_container { padding: 0; } .header .site_title_container h1 { line-height: 1; margin: 0; } .header .site_title_container a { text-decoration: none; font-weight: bold; float: left; } .header .site_title_container .site_title a { font-size: 28px; width: 65px; letter-spacing: 2px; line-height: 1.2; color: #000000; } .header .site_title_container .site_title a span { display: block; } .header .site_title_container .site_title a:hover { color: var(--gray-dark); } .header .site_title_container .description { font-size: 0.9rem; color: #565654; float: right; text-align: right; } .header .site_title_container .description .sub_title { font-weight: normal !important; float: none !important; text-align: right; } .header .my_socials { list-style: none; font-size: 14px; margin: 5px 0; } .header .my_socials a { min-height: 44px; min-width: 44px; /*display: flex;*/ align-items: center; justify-content: center; } .header .my_socials i { margin-left: 10px; } .header .my_socials a { color: #5f5f5f; font-size: 16px; float: none; cursor: pointer; } .header .my_socials a:hover { color: #000000; } .header .sys_function { list-style: none; font-size: 14px; } /* ===== 文章样式 ===== */ .post { background-color: var(--white); margin-top: 20px; } .post .post_title h2 { letter-spacing: 1px; font-size: 1.4rem; line-height: 1; font-weight: 600; color: var(--dark-color); margin: 0 0 6px; } .post .post_title a { text-decoration: none; letter-spacing: 1px; color: var(--dark-color); font-size: 1.5rem; line-height: 28px; transition: var(--transition); } .post .post_title a:hover { /*color: var(--accent-color);*/ } .post .post_title span { color: rgba(0, 0, 0, 0.44); font-size: 14px; } .post .post_detail_title h2 { font-size: 1.8rem; } .post .list p { padding-bottom: 0 !important; } .post .post_content { word-break: normal; margin-top: 20px; } .post .post_content p { line-height: 2em; letter-spacing: 0.2px; margin-bottom: 20px; } h1 a, h1 a:link, h1 a:visited { color: var(--white); } .post .post_content h3 a, .post .post_content h4 a, .post .post_content h5 a, .post .post_content h6 a { color: var(--accent-color); text-decoration: none; letter-spacing: 1px; } .post .post_content p a, .post .post_content ul li a { text-decoration: none; letter-spacing: 1px; background-color: #ffdfdc; border-radius: var(--border-radius); padding: 1px 4px; margin: 0 1px; color: var(--accent-color); font-weight: bold; transition: var(--transition); } .post .post_content a:hover { color: var(--accent-hover); background-color: #ffc9c4; } .post .post_footer { padding: 20px 0; } .post .post_footer .meta { max-width: 100%; height: 25px; color: var(--gray-medium); } .post .post_footer .meta .info { float: left; font-size: 11px; } .post .post_footer .meta .info .date { margin-right: 10px; } .post .post_footer .meta .field { margin-right: 10px; } .post .post_footer .meta .tags a { text-decoration: none; color: var(--gray-medium); padding-right: 6px; transition: var(--transition); } .post .post_footer .meta .tags a:hover { color: var(--dark-color); } /* ===== 标签页样式 ===== */ .page_tags { text-align: center; margin-top: 50px; } .page_tags ul { margin: 0; padding: 0; } .page_tags ul li { display: inline-block; font-size: 1em; } .page_tags ul li a{ display: block; padding: 10px 15px; } .page_tags ul li a:hover{ background-color: var(--gray-light); } .page_tags .terms_count { display: inline-block; position: relative; top: -8px; right: -2px; color: #c5c5c5; font-size: 12px; } /* ===== 评论样式 ===== */ .doc_comments { font-size: 14px; color: #383838; margin-top: 30px; padding: 35px 0 45px; } .doc_comments .comments_block_title { color: #000000; padding: .25em; font-size: 20px; } /* ===== 页脚样式 ===== */ .footer { clear: both; max-width: 780px; text-align: center; font-size: 12px; padding: 40px 0; margin: 0 auto; } .footer a { color: #a6a6a6; margin: 0 12px; transition: var(--transition); } .footer a:hover { color: var(--dark-color); } .footer .powered_by { margin: 0; font-size: 11px; } .footer .powered_by a { color: #cccccc; margin: 0 2px; } .footer .powered_by a:hover { color: var(--dark-color); } .footer .footer_slogan { padding-top: 25px; padding-bottom: 10px; color: #000000; font-size: 16px; letter-spacing: 1px; } /* ===== 归档样式 ===== */ .list_with_title { font-size: 14px; margin: 0; padding: 0; } .list_with_title li { list-style-type: none; padding: 0; } .list_with_title .listing_title { font-size: 1.4rem; color: var(--dark-color); font-weight: bold; padding-top: 10px; line-height: 2.2em; } .list_with_title .listing { margin: 0 0 50px; padding: 0; line-height: 2.1; } .list_with_title .listing .listing_post { padding-bottom: 5px; transition: var(--transition); } .list_with_title .listing .listing_post:hover { transform: translateX(5px); } .list_with_title .listing .listing_post a { display: inline-block; width: 85%; transition: var(--transition); } .list_with_title .listing .listing_post .post_time { float: right; color: #c5c5c5; font-size: 14px; } .list_with_title .listing .listing_post a:hover { /*color: var(--accent-color);*/ } /* ===== 分页样式 ===== */ .pagination { padding: 30px 0 60px; border-bottom: 1px solid #f2f2f2; color: var(--gray-dark); font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 20px; position: relative; } .pagination a { color: #555; text-decoration: none; transition: var(--transition); padding: 12px 24px; border-radius: 8px; background-color: var(--white); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 0 1 auto; min-width: 120px; text-align: center; font-weight: 500; position: relative; } .pagination a:hover { color: #333; background-color: var(--gray-light); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .pagination .pre { margin-right: auto; } .pagination .next { margin-left: auto; } /* 添加图标 */ .pagination .pre::before { margin-right: 8px; font-weight: bold; } .pagination .next::after { margin-left: 8px; font-weight: bold; } /* 当前页码指示器 */ .pagination .page-current { color: var(--gray-medium); font-size: 0.9rem; padding: 0 15px; text-align: center; flex-shrink: 0; order: 0; } /* ===== Markdown 内容样式 ===== */ .markdown { line-height: 1.8em; word-wrap: break-word; word-break: normal; overflow-wrap: break-word; } .markdown ul, .markdown ol, .markdown dl { margin: 0.8em 0; } .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 20px 0; color: #000000; } .markdown h1, .markdown h2 { border-radius: var(--border-radius); padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .markdown h1 { color: var(--white); font-size: 1.35em; background-color: #777777; } .markdown h2 { font-size: 1.25em; background-color: #D3D3D3; } .markdown h3 { font-size: 1.15em; } .markdown h4 { font-size: 1.1em; } .markdown h5 { font-size: 1em; } .markdown h6 { font-size: 0.9em; } .markdown pre, .markdown code { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; background: #f8fafc; border: none; } .markdown pre { padding: 16px; display: block; overflow: auto; white-space: pre; word-wrap: break-word; border-radius: 8px; } .markdown code { color: var(--gray-dark); padding: 4px 5px; border-radius: var(--border-radius); white-space: pre-wrap; overflow-wrap: break-word; } .markdown pre code { padding: 0; color: #555555; white-space: pre; } .markdown blockquote { box-sizing: border-box; margin: 2.5em 0; padding: 10px; color: #555555; border-left: 8px solid #dddfe4; background: #eef0f4; } .markdown blockquote p { white-space: pre-line; margin-bottom: 10px !important; } .markdown strong, .markdown b, .markdown em { padding: 1px 4px; background-color: #f5f5b5; /*color: #d7d718;*/ font-weight: bold; border-radius: var(--border-radius); letter-spacing: 1px; } .markdown .fancybox { margin: 15px 0 15px 0; text-align: center; } .markdown img { max-width: 90%; height: auto; border-radius: var(--border-radius); max-height: 100vh; } /* ===== 表格样式 ===== */ table { width: 100%; border-collapse: collapse; border-spacing: 0; display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; } table th { background-color: #f6f8fa; } table th, table td { padding: 10px 20px; border: 1px solid #dfe2e5; align-content: center; white-space: nowrap; } /* ===== 浮动按钮样式 ===== */ a.back_to_top, a.content_hidden, a.content_display, a.top_to_back { text-decoration: none; position: fixed; bottom: 40px; right: 30px; background: #f0f0f0; height: 40px; width: 40px; border-radius: 50%; line-height: 36px; font-size: 18px; text-align: center; transition-duration: 0.5s; transition-property: background-color, transform; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 999; } a.back_to_top span { color: #888888; } .content_hidden { bottom: 100px !important; line-height: 44px !important; font-size: 20px !important; } .content_display { bottom: 100px !important; line-height: 44px !important; } .top_to_back { bottom: 160px !important; line-height: 50px !important; } a.back_to_top:hover, a.content_hidden:hover, a.content_display:hover, a.top_to_back:hover { cursor: pointer; background: #dfdfdf; transform: translateY(-2px); } a.back_to_top:hover span { color: var(--gray-dark); } /* ===== 黑暗模式样式 ===== */ .darkmode-toggle { z-index: 100; } .darkmode-layer { z-index: 1; } .darkmode--activated .main, .darkmode--activated .post { box-shadow: 0 10px 20px 0 rgba(210, 210, 210, 0.7); background: rgba(210, 210, 210); } .darkmode--activated .markdown code { background-color: rgba(190, 190, 190); color: #000; } .darkmode--activated .markdown pre code { background-color: #f8fafc; } .darkmode--activated .list_with_title .listing .listing_post .post_time, .darkmode--activated .page_tags .terms_count, .darkmode--activated .post .post_footer .meta { color: var(--primary-color); } .darkmode--activated .post_page img { filter: invert(0.85) hue-rotate(0deg) brightness(1.1) contrast(1.1) !important; mix-blend-mode: normal !important; } .darkmode--activated .post .post_footer .meta .tags a { color: var(--primary-color) !important; } .darkmode--activated .footer .powered_by a { color: var(--primary-color) !important; } /* ===== 工具类 ===== */ .display_none { display: none !important; } .display_block { display: block !important; } .m-l-10 { margin-left: 10px; } /* ===== 响应式设计 ===== */ /* 超大桌面 (≥1800px) - 为目录留出空间 */ @media screen and (min-width: 1800px) { .main { width: 820px; transform: translateX(-50%); } .content, .header, .nav_container { width: 720px; margin: 0 auto; } } /* 大屏幕桌面 (1351px - 1799px) - 为目录留出空间 */ @media screen and (min-width: 1351px) and (max-width: 1799px) { .main { width: 820px; transform: translateX(-50%); } .content, .list_with_title .container, .header, .nav_container { width: 720px; margin: 0 auto; } } /* 小桌面 (1001px - 1350px) */ @media screen and (min-width: 1001px) and (max-width: 1350px) { .main { width: 820px; margin: 60px auto 0; } .content, .list_with_title .container, .header, .nav_container { width: 720px; margin: 0 auto; } } /* 大平板 (751px - 1000px) */ @media screen and (min-width: 751px) and (max-width: 1000px) { .main, .content, .list_with_title .container, .header, .nav_container { width: 100%; max-width: 90%; margin: 0 auto; } .main { margin-top: 40px; } .content .post_content { font-size: var(--mobile-font-md); } .post .post_detail_title h2 { font-size: var(--mobile-font-3xl); padding: var(--mobile-space-lg); padding-left: 0; } .nav_container .site_nav a { font-size: var(--mobile-font-sm); padding: 10px 14px; } .nav_container .menu_icon { display: block; font-size: 1.8rem; top: 15px; right: 15px; } .nav_container .site_nav { display: none; position: fixed; top: 70px; left: 0; right: 0; background-color: var(--white); box-shadow: var(--shadow); padding: 10px 0; border-radius: 0 0 12px 12px; } .nav_container .site_nav.active { display: block; animation: slideDown 0.3s ease; } .nav_container .site_nav ul { float: none; text-align: center; } .nav_container .site_nav li { float: none; display: block; } .header .my_socials, #content_hidden, #search-btn, #darkmode-layer, #darkmode-toggle, #icon_more { display: none !important; } .header { padding: 40px 0 100px; } .header .site_title_container .site_title a { font-size: var(--mobile-font-3xl); } .post .post_title a { font-size: var(--mobile-font-2xl); } } /* 小平板和大型手机 (576px - 750px) */ @media screen and (max-width: 750px) { .main, .content, .list_with_title .container, .header, .nav_container { width: 100%; margin: 0 auto; padding: 0 var(--mobile-space-xl); } .main { margin-top: 20px; box-shadow: none; border-radius: 0; } .content .post_content { font-size: var(--mobile-font-base); line-height: 1.7; } .header .site_title_container .site_title a { font-size: var(--mobile-font-2xl); text-align: center; display: block; width: 100%; float: none; } .post .post_title a { font-size: var(--mobile-font-xl); line-height: 1.3; } .post .post_detail_title h2 { font-size: var(--mobile-font-2xl); line-height: 1.3; margin: 0 0 var(--mobile-space-lg) 0; padding: var(--mobile-space-lg); padding-left: 0; } .nav_container { padding: var(--mobile-space-md) 0; } .nav_container .site_nav a { font-size: var(--mobile-font-lg); padding: var(--mobile-space-md) var(--mobile-space-lg); } .page_tags ul li { font-size: var(--mobile-font-base); } .page_tags ul li a{ display: block; padding: var(--mobile-space-sm) var(--mobile-space-md); } .list_with_title .listing .listing_post .post_time { font-size: var(--mobile-font-sm); } .list_with_title .listing_title { font-size: var(--mobile-font-xl); } .doc_comments .comments_block_title { font-size: var(--mobile-font-xl); } .nav_container .menu_icon { display: block; font-size: 1.5rem; top: 15px; right: 15px; background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .nav_container .site_nav { display: none; position: fixed; left: 0; right: 0; background-color: var(--white); box-shadow: 0 5px 20px rgba(0,0,0,0.15); padding: var(--mobile-space-md) 0; border-radius: 0 0 12px 12px; } .nav_container .site_nav.active { display: block; animation: slideDown 0.3s ease; } .nav_container .site_nav ul { float: none; text-align: center; } .nav_container .site_nav li { float: none; display: block; } .header { padding: var(--mobile-space-2xl) 0 80px; text-align: center; } .header .site_title_container .description { float: none; text-align: center; font-size: var(--mobile-font-base); margin-bottom: 20px; } .header .my_socials { justify-content: center; display: flex; margin-top: var(--mobile-space-lg); } .header .my_socials li { margin: 0 var(--mobile-space-sm); } .post { margin: var(--mobile-space-xl) 0; padding: 0 var(--mobile-space-md); } .post .post_content p { line-height: 1.7; margin-bottom: 1.2em; } .markdown h1, .markdown h2 { padding: var(--mobile-space-lg); margin: 1.5em 0 1em 0; } .markdown h1 { font-size: var(--mobile-font-xl); } .markdown h2 { font-size: var(--mobile-font-lg); } .markdown h3 { font-size: var(--mobile-font-md); } .markdown pre { padding: var(--mobile-space-lg); margin: 1.2em 0; font-size: var(--mobile-font-sm); } .markdown blockquote { margin: 1.5em 0; padding: var(--mobile-space-lg); } .list_with_title .listing .listing_post { flex-direction: column; align-items: flex-start; padding: var(--mobile-space-md) 0; padding-bottom: 0; } .list_with_title .listing .listing_post a { width: 75%; } .list_with_title .listing .listing_post .post_time { width: 23%; text-align: left; } .post_footer, #post_header, #content_hidden, #search-btn, #darkmode-layer, #darkmode-toggle, #icon_more, #footer_powered_by, #footer_slogan { display: none !important; } a.back_to_top, a.top_to_back { width: 44px; height: 44px; font-size: 1.1rem; line-height: 44px; bottom: 20px; right: 20px; } .content_hidden { bottom: 80px !important; } .top_to_back { bottom: 140px !important; } .pagination { padding: 25px 0 40px; gap: 15px; flex-wrap: nowrap; } .pagination a { flex: 1; min-width: 0; padding: 14px 16px; font-size: var(--mobile-font-base); border-radius: 10px; } .pagination .pre { margin-right: 0; order: 1; } .pagination .next { margin-left: 0; order: 3; } .pagination .page-current { order: 2; flex: 0 0 auto; font-size: var(--mobile-font-sm); padding: 0 10px; } /* 调整图标大小 */ .pagination .pre::before { margin-right: 6px; font-size: 0.9em; } .pagination .next::after { margin-left: 6px; font-size: 0.9em; } .footer { padding: var(--mobile-space-xl) var(--mobile-space-md); font-size: var(--mobile-font-sm); } .footer a { margin: 0 var(--mobile-space-sm); display: inline-block; margin-bottom: var(--mobile-space-xs); } } /* 小型手机 (≤575px) */ @media screen and (max-width: 575px) { .main, .content, .list_with_title .container, .header, .nav_container { width: 100%; margin: 0 auto; padding: 0 var(--mobile-space-lg); } .content .post_content { font-size: var(--mobile-font-sm); } .header .site_title_container .site_title a { font-size: var(--mobile-font-xl); } .post .post_title a { font-size: var(--mobile-font-lg); } .post .post_detail_title h2 { font-size: var(--mobile-font-xl); padding: var(--mobile-space-md); padding-left: 0; } .nav_container .site_nav a { font-size: var(--mobile-font-md); padding: var(--mobile-space-sm) var(--mobile-space-md); } .markdown h1, .markdown h2 { padding: var(--mobile-space-md); } .markdown pre { padding: var(--mobile-space-md); font-size: var(--mobile-font-xs); } table { font-size: var(--mobile-font-xs); } table th, table td { padding: 8px 12px; } .header { padding: var(--mobile-space-xl) 0 60px; } .post { margin: var(--mobile-space-lg) 0; padding: 0 var(--mobile-space-sm); } .post .post_footer .meta { flex-direction: column; align-items: flex-start; gap: var(--mobile-space-sm); } .post .post_footer .meta .info { flex-direction: column; gap: var(--mobile-space-xs); } .pagination { gap: 12px; padding: 20px 0 35px; } .pagination a { padding: 16px 12px; font-size: var(--mobile-font-sm); min-height: 48px; } .pagination .page-current { font-size: var(--mobile-font-xs); padding: 0 8px; } .footer { padding: var(--mobile-space-lg) var(--mobile-space-sm); } } /* 超小型手机 (≤375px) */ @media screen and (max-width: 375px) { :root { --mobile-space-sm: 8px; --mobile-space-md: 12px; --mobile-space-lg: 16px; --mobile-space-xl: 20px; --mobile-space-2xl: 24px; } .main, .content, .list_with_title .container, .header, .nav_container { width: 100%; margin: 0 auto; padding: 0 var(--mobile-space-md); } .content .post_content { font-size: var(--mobile-font-xs); } .header .site_title_container .site_title a { font-size: var(--mobile-font-lg); } .post .post_title a { font-size: var(--mobile-font-md); } .markdown h1, .markdown h2 { padding: var(--mobile-space-sm); font-size: var(--mobile-font-md); } .nav_container .site_nav a { font-size: var(--mobile-font-base); } .header .my_socials a { font-size: var(--mobile-font-sm); } a.back_to_top, a.top_to_back { width: 40px; height: 40px; font-size: 1rem; line-height: 40px; bottom: 15px; right: 15px; } .pagination { gap: 10px; } .pagination a { padding: 14px 10px; font-size: var(--mobile-font-xs); } /* 隐藏文字，只显示图标 */ .pagination a span { display: none; } .pagination .pre::before { content: "←"; margin-right: 0; font-size: 1.1em; } .pagination .next::after { content: "→"; margin-left: 0; font-size: 1.1em; } .pagination .page-current { font-size: 0.75rem; } } /* 横屏手机优化 */ @media screen and (max-width: 750px) and (orientation: landscape) { .header { padding: var(--mobile-space-lg) 0 50px; } .nav_container .site_nav { max-height: 70vh; overflow-y: auto; } .post .post_content p { font-size: var(--mobile-font-sm); line-height: 1.6; } .pagination a { padding: 12px 16px; min-height: 44px; } } /* 触摸设备优化 */ @media (hover: none) and (pointer: coarse) { a, button, .nav_container .site_nav a, .menu_icon a, .header .my_socials a { /*min-height: 44px;*/ /*min-width: 44px;*/ /*display: flex;*/ /*align-items: center;*/ /*justify-content: center;*/ } .post .post_content p a, .post .post_content ul li a { padding: 4px 8px; min-height: auto; } .nav_container .site_nav a { padding: 15px 20px; display: flex; align-items: center; justify-content: center; } /* 增加触摸目标大小 */ .post .post_title a, .list_with_title .listing .listing_post a { /*padding: 5px 0;*/ } /* 优化滚动体验 */ .main { -webkit-overflow-scrolling: touch; } .pagination a { min-height: 48px; padding: 14px 20px; } .pagination a:active { transform: scale(0.98); transition: all 0.1s ease; } } /* 高DPI屏幕优化 */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .markdown img { image-rendering: -webkit-optimize-contrast; } } /* 减少动画（对偏好减少动画的用户） */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== 动画效果 ===== */ @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } /* 滚动条样式优化 */ .markdown pre::-webkit-scrollbar { height: 8px; } .markdown pre::-webkit-scrollbar-button { display: none; } .markdown pre::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .markdown pre::-webkit-scrollbar-thumb { min-height: 1rem; background-color: #c1c1c1; background-clip: padding-box; border-radius: 4px; } .markdown pre::-webkit-scrollbar-thumb:active { background-color: #999999; }