托管在GitHub的项目CSS在移动端无法完整渲染的技术求助
这种移动端渲染异常但桌面端正常的情况，我遇到过好多次，大概率是响应式布局的断点规则、移动端特有的CSS属性冲突，或者DOM布局挤压导致的。结合你提到的responsive.css文件，给你梳理几个针对性的排查和解决方向：
检查第二个区块的隐藏规则：打开浏览器开发者工具（切换到移动端模拟模式），选中空白区域对应的DOM元素，查看
Styles面板里的媒体查询规则。很多时候会不小心在移动端断点（比如@media (max-width: 768px)）里给第二个区块加了display: none或者visibility: hidden，但没在合适的断点恢复显示。如果发现这类规则，要么删除，要么调整断点范围适配你的需求。排查高度与溢出问题：移动端视口高度有限，第二个区块可能因为固定高度、
overflow: hidden或者100vh的适配问题被截断。比如用height: 100vh会忽略移动端状态栏高度，导致区块被挤出视口，你可以换成min-height: 100svh来适配移动端的实际可视高度；同时检查区块的overflow属性，避免内容被隐藏。确认响应式CSS的加载顺序：CSS是层叠生效的，如果
responsive.css加载在主style.css之前，里面的规则可能会被主样式覆盖，导致移动端样式不生效。确保HTML里的<link>标签顺序是主样式在前，响应式样式在后，比如：<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css">检查DOM布局挤压情况：第一个区块如果设置了
flex-grow: 1或者占满了整个视口高度，会把第二个区块挤出可视区域。用开发者工具的Elements面板查看第二个区块的位置，看它是否在视口下方，如果是，调整第一个区块的高度规则，比如添加max-height限制，或者用flex-shrink: 1让它可以被压缩。测试移动端CSS兼容性：有些新的CSS布局属性（比如某些Grid语法、
clamp()的特殊用法）在移动端浏览器支持不佳，导致区块无法正常渲染。检查第二个区块用到的CSS属性，换成兼容性更好的写法，或者添加必要的浏览器前缀。
另外，你之前尝试在<head>的<style>和style.css里添加样式，要注意这些样式是否被responsive.css里的媒体查询规则覆盖了——可以给测试样式加上!important临时验证（不推荐长期使用），如果加上后区块显示了，就说明是样式优先级的问题，调整选择器的权重即可。
内容的提问来源于stack exchange，提问作者Gino Jan Ludikhuyze
